Windows Phone 8.1 的列表框选定项样式答案

【问题标题】：ListBox Selected Item Style for Windows Phone 8.1Windows Phone 8.1 的列表框选定项样式
【发布时间】：2014-10-14 10:45:45
【问题描述】：

我有一个简单的列表框，我想更改样式，以便在选择项目时，项目的边框会改变颜色。

目前我的 ListBox 和样式定义为：

<ListBox x:Name="DaysList" HorizontalContentAlignment="Stretch" Background="Transparent" Height="300" Grid.Row="1" >
            <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    <Setter Property="FontSize" Value="30" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="LayoutRoot" BorderThickness="3" BorderBrush="Black" >
                                <ContentControl x:Name="ContentContainer" 
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  
                                    Margin="{TemplateBinding Padding}" 
                                    Content="{TemplateBinding Content}" 
                                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                                    Foreground="{TemplateBinding Foreground}" />
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Pink"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="MouseOver" />
                                        <VisualState x:Name="Disabled"/>                                             
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>                                    
                            </Border>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>                
        </ListBox.ItemContainerStyle>                
        </ListBox>

Pressed 和 Normal 视觉状态按预期工作，但 Selected 状态不是。我在某处错过了一步吗？

【问题讨论】：

标签： c# xaml windows-phone-8.1 controltemplate listboxitem

【解决方案1】：

它不起作用，因为您要查找的状态是：SelectedUnfocused

<VisualStateGroup x:Name="SelectionStates">
    <VisualState x:Name="SelectedUnfocused">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

在你实现代码之后你会意识到你没有正确处理 Unselected 的情况：所以当它被 Unselected 时将它设置回绿色

<VisualState x:Name="Unselected">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

【讨论】：