Silverlight和Metro中ListBox样式的添加及使用
我们在做项目时，遇到如何在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的样式，根据自己项目的要求，从而实现不同的选中效果及动画。
