我们在做项目时，遇到如何在FlipView 左右移动时，更改ListBox的选中项。XAML代码如下所示：（FlipView 和ListBox绑定同一数据源，一个更改后，另一个也更改）
<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>该代码主要用于显示每一页内容，当我们在触摸屏上左右滑动时，FlipView控件里的Items项会跟着左右滑动，显示不同的内容；我们将FlipView控件Item的改变绑定到ListBox上，当我们向左或向右滑动时，ListBox的选中项也会跟着改变。ListBox的代码如下所示：
<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}" />
注意以上红色代码，两个控件绑定的是同一数据源，ListBox的SelectedItem绑定到FlipView控件，绑定的模式为双向绑定，这样不管哪一个控件改变，都会引发另一个控件的数据改变。这里不介绍具体的实现。主要是ListBox的样式如何设置。
ListBox有一个ItemContainerStyle属性，该属性主要是定义每一个Item的显示样式，这和ItemTemplate属性有点不一样，ItemContainerStyle主要是设计，每一项的状态，比如在CommonStates（通常状态），SelectionStates（选中状态）显示的效果。
以下的Style主要实现了ListBox在选中时的样式，鼠标放上去时，以及鼠标左键按下去，鼠标左键弹起来时以及选中项的效果的样式。
<Style x:Key="SubDicListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/> <Setter Property="TabNavigation" Value="Local"/> <Setter Property="Padding" Value="8,10"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> //通常状态时Item的状态，选中项的矩形框高度只有4像素 <Storyboard> <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="4"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <!--鼠标放上去时Item的背景颜色--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot"> <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <!--按下鼠标时Item的背景颜色--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPressedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected"> <!--改变选中项后，原来被选中的项的动画-->//当从一个Item改变到另个一个Item时，原来被选中的Item会执行此动画 <Storyboard> <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="16"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="4"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedUnfocused"> <Storyboard> <!--选中时Item的背景色--> //当Item被选中时，会执行此动画（矩形框的高度会从4像素变成16像素） <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="4"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="16"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedDisabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid"> <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPointerOver"> <Storyboard> <!--鼠标左键弹起时Item的背景颜色--> <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="4"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="16"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPressed"> <Storyboard> <!--选中按下鼠标左键并未弹起时Item的背景颜色--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> <VisualState x:Name="PointerFocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid x:Name="InnerGrid" Margin="0,0,0,0" Background="Transparent" Height="75" HorizontalAlignment="Center" VerticalAlignment="Bottom"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <!--<Rectangle x:Name="FocusVisualWhite" Opacity="0" StrokeDashOffset=".5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/> <Rectangle x:Name="FocusVisualBlack" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>--> <TextBlock Text="{Binding Name}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="White"/> <Rectangle x:Name="rectangle" Fill="{Binding DicPic}" Grid.Row="1" Width="160" Height="4" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Bottom"/> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>以上就是在ListBox中更改ItemContainerStyle的样式，Item在选中和没选中时，实现自定义动画效果。
该文章主要是介绍如何更改ItemContainerStyle的样式，根据自己项目的要求，从而实现不同的选中效果及动画。