我們在做項目時，遇到如何在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的樣式，根據自己項目的要求，從而實現不同的選中效果及動畫。