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

问题描述

我有一个样式列表框.将鼠标悬停在上方和选中时，列表框项目会更改颜色.悬停并选择工作正常.但是选择一个项目时，然后将鼠标脱离它并返回到悬停在它上面，导致它导致它返回悬停/未选择的状态，即使它仍然被选中.如何将列表框项保持在选定"的视觉状态?

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}" />

推荐答案

发生的情况是来自不同状态组的状态(selected 和 mousover)竞争相同的属性(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屋！