【UWP】FlipView绑定ItemsSource，Selectedindex的问题
最近在做列表头部的Carousel展示，Carousel使用的是FlipView展示，另外使用ListBox显示当前页，如下图
我们先设置一个绑定的数据源
public class GlobalResource : INotifyPropertyChanged { private ObservableCollection<string> _items; public ObservableCollection<string> Items { get { return _items = _items ?? new ObservableCollection<string> { Guid.NewGuid().ToString(), Guid.NewGuid().ToString(), Guid.NewGuid().ToString(), Guid.NewGuid().ToString(), }; } set { _items = value; OnPropertyChanged(nameof(Items)); } } public event PropertyChangedEventHandler PropertyChanged; [NotifyPropertyChangedInvocator] protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }
Items作为数据源绑定在FlipView和ListBox上，布局代码如下
<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="using:App1" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <local:GlobalResource x:Key="GlobalResource" /> <Style x:Key="DotListBoxItemStyle" TargetType="ListBoxItem"> <Setter Property="Background" Value="Transparent" /> <Setter Property="TabNavigation" Value="Local" /> <Setter Property="Padding" Value="12,11,12,13" /> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="Margin" Value="5" /> <Setter Property="UseSystemFocusVisuals" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="Disabled" /> <VisualState x:Name="PointerOver" /> <VisualState x:Name="Pressed" /> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="dotEllipse" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedUnfocused"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="dotEllipse" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="dotEllipse" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="dotEllipse" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Ellipse x:Name="dotEllipse" Width="10" Height="10" Control.IsTemplateFocusTarget="True" Fill="White" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <ListView> <ListView.Header> <Grid Height="200"> <FlipView x:Name="flipView" ItemsSource="{Binding Source={StaticResource GlobalResource}, Path=Items}"> <FlipView.ItemTemplate> <DataTemplate> <Rectangle Height="200" Margin="5,0" Fill="Red" /> </DataTemplate> </FlipView.ItemTemplate> </FlipView> <ListBox x:Name="listBox" Margin="0,0,0,8" HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" ItemContainerStyle="{StaticResource DotListBoxItemStyle}" ItemsSource="{Binding Source={StaticResource GlobalResource}, Path=Items}" SelectedIndex="{Binding ElementName=flipView, Path=SelectedIndex, Mode=TwoWay}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <Ellipse Width="10" Height="10" Fill="White" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </ListView.Header> <Button Click="ButtonBase_OnClick">test</Button> </ListView> </Grid> </Page>
一切正常显示
问题：
下面我们需要修改数据源
var globalResource = (GlobalResource) Resources["GlobalResource"]; globalResource.Items.Clear(); for (var i = 0; i < 10; i++) { globalResource.Items.Add(Guid.NewGuid().ToString()); } Debug.WriteLine("flipView.SelectedIndex = {0}", flipView.SelectedIndex); Debug.WriteLine("listBox.SelectedIndex = {0}", listBox.SelectedIndex);
虽然数据源变了，但是并没有选中当前页（第一个点不为蓝色），通过输出信息发现SelectedIndex都是0，并没有改变
跟踪发现，调用ObservableCollection.Clear方法的时候SelectedIndex都被设为了-1，Add第一个的时候SelectedIndex被置为0，数据源和相关数据都改变了，不知道为什么样式没有出发（VisualState）由于不知道ListView内部实现，我们无法得知具体原因是啥
解决：
对于上面问题，可以通过下面方式解决
重新改变SelectedIndex让ListBox更新样式
var globalResource = (GlobalResource) Resources["GlobalResource"]; globalResource.Items.Clear(); for (var i = 0; i < 10; i++) { globalResource.Items.Add(Guid.NewGuid().ToString()); } flipView.SelectedIndex = -1; flipView.SelectedIndex = 0;
Demo:
http://files.cnblogs.com/files/bomo/CarouselDemo.zip