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的样式，根据自己项目的要求，从而实现不同的选中效果及动画。