自定义样式的列表框-如何保持所选项目的样式? [英] Custom styled listbox - how can I keep the style for a selected item?

问题描述

我有一个样式列表框.将鼠标悬停并选中时，列表框项目会更改颜色.将鼠标悬停并选择正常工作.但选择一个项目，然后以鼠标关闭它，回来悬停在它会导致它，即使它仍然选择回到悬停/未选中状态时.如何使listboxitem处于选定"视觉状态?

I have a styled listbox. Listbox items change color when hovered over and when selected. Hover and select work fine. But when selecting an item then taking the mouse off it and coming back to hover over it causes it to go back to hover/unselected state even though it is still selected. How can I keep the listboxitem in a "selected" visual state?

<Style x:Name="myListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="myBorder" CornerRadius="5" BorderThickness="3" Background="#FF292121" Margin="0">
                    <Grid HorizontalAlignment="Stretch">
                        <ContentPresenter Content="{TemplateBinding Content}" Margin="5,0,5,0" />
                    </Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="myBorder" Storyboard.TargetProperty="(Background).(SolidBrush.Color)" Duration="00:00:00.2" To="#FF949290" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="myBorder" Storyboard.TargetProperty="(Background).(SolidBrush.Color)" Duration="00:00:00.2" To="#FF949290" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused"/>
                        </VisualStateGroup>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="myListBoxStyle" TargetType="ListBox">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="ItemContainerStyle" Value="{StaticResource myListBoxItemStyle}"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBox">
                <Grid Margin="0">
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ListBox Name="theControl" Style="{StaticResource myListBoxStyle}" />

推荐答案

发生了什么事，您来自不同状态组的状态(选定状态和多用状态)争夺同一属性(myBorders的背景).您将不得不添加另一个元素(可能是矩形)，并在其中一种状态下更改该元素的背景.

What happening is your states (selected and mousover) from different state groups compete for the same property (myBorders's Background). You will have to add another element (rectangle maybe) and change that elements background in one of the states.

通常，您不应操作来自不同状态组中状态的同一元素的相同属性.视觉状态管理器不知道如何处理这种情况，因为它不知道哪个状态应该优先.

In general you should not manipulate same property of the same element from states in different state groups. Visual state manager doesn't know how to handle this situation, since it doesn't know which state should take precedence.

这篇关于自定义样式的列表框-如何保持所选项目的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！