Windows Phone 8.1的列表框选定项样式 [英] ListBox Selected Item Style for Windows Phone 8.1

问题描述

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

I have a simple listbox and I would like to change the Style so that when an item is selected, the border of the item changes colour.

目前，我的ListBox和样式定义为:

Currently my ListBox and style is defined as:

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

已按下"状态和正常视觉状态"正在按预期方式工作，但已选择"状态未达到预期状态.我在某处错过了一步吗?

The Pressed and Normal Visual States are working as expected, but the Selected state isn't. Am I missing a step somewhere?

推荐答案

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

It doesn't work because the State you're looking for is: 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>

---

实现代码后，您将意识到您没有正确处理未选中"情况:因此，在未选中"情况下将其设置为绿色

---

After you implement the code you will realize you didn't handle the Unselected case correctly: So set it back to green when it gets Unselected

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

这篇关于Windows Phone 8.1的列表框选定项样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！