c# - Windows Phone 8.1 的列表框所选项目样式

Question

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

目前我的列表框和样式定义为:

<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>

“按下”和“正常”视觉状态按预期工作，但“选定”状态却未按预期工作。我是否遗漏了某个步骤？

Answer 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>

---

实现代码后，您会意识到您没有正确处理未选择的情况:因此，当它未选择时将其设置回绿色

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