下面两张图片是正常移动时的显示结果:
下面两种图片是移动几次过后,第一项的显示数据和第二项的显示数据会交换:
代码如下所示:
UI界面(主要红色代码的绑定)
<Grid Margin="0,0,38,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="DicName" Text="{Binding DicName}" Foreground="White" FontSize="36"/>
<Button x:Name="SoundTag" Click="SoundButton_Click" Height="56" Width="84" BorderThickness="0" BorderBrush="Transparent" Visibility="Collapsed" HorizontalAlignment="Right" Margin="20,-10,0,0" Style="{StaticResource SoundButtonStyle}"/>
</StackPanel>
<FlipView Grid.Row="1" x:Name="ViewDicResult" FontSize="34" ItemsSource="{Binding DicList}">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<ScrollViewer Height="{Binding ElementName=ViewDicResult}" Content="{Binding Panel}"/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<Grid x:Name="SubDicGrid" VerticalAlignment="Bottom" Grid.Row="2" Margin="0,0,0,0" Height="90" >
<ListBox x:Name="SubDicName" Background="Transparent" Margin="0" Height="75" HorizontalAlignment="Center" VerticalAlignment="Bottom" ItemsSource="{Binding DicList}" SelectedItem="{Binding SelectedItem, ElementName=ViewDicResult, Mode=TwoWay}" IsTabStop="False" Style="{StaticResource SubDicListBoxStyle}" ItemContainerStyle="{StaticResource SubDicListBoxItemStyle}" />
</Grid>
</Grid>
注意:ScrollViewer 控件的Content绑定的是一个StackPanel控件,该控件里存放着词典的解释内容。
主要功能就是移动FlipView控件或者点击ListBox控件,词典的内容会跟着改变。
后台代码如下:
private DicInfo dictionary //根据输入的单词获得词典的解释
this.DataContext = dictionary; 自定义的解释对象如下:
public class DicInfo
{
public string DicName { set; get; } //主词典名称
public Guid Guid { set; get; } //词典的Guid
public IRandomAccessStream Mp3Address { set; get; } //单词的读音
public List<Dictionarys> DicList{set;get;} //字词典的列表
public string Picture { set; get; } //主词典的图片
public DicInfo()
{
DicList = new List<Dictionarys>();
}
}
public class Dictionarys //每本词典的对象
{
public string Name { set; get; } //字词典的名称
public StackPanel Panel { set; get; } //子词典的解释内容放入Panel中
public string DicPic { set; get; } //子词典的图片
}
ListBox里绑定的是子词典名称,比如:字义,变化等,这些是子词典名称,上面FlipView中显示对应子词典的解释内容。
不知道为什么FlipView 控件绑定数据后,左右移动几次过后,原来的数据项顺序会乱???求解
我现在也遇到类似的问题 ,你现在解决了吗 ?
我的问题解决了,我采用的是动态生成FlipViewItem,然后添加到FlipView控件里面,你遇到的问题是什么,你那个是如何实现的?