自定义样式列表框 - 如何保留所选项目的样式？

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?

我有一个风格的列表框。列表框项目在悬停时和选中时会更改颜色。悬停并选择正常工作。但是当选择一个项目然后将鼠标移开然后将其悬停在它上面会导致它返回到悬停/未选中状态,即使它仍处于选中状态。如何将listboxitem保持在“选定”的可视状态?

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

1 个解决方案

#1

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.

发生了什么事情是来自不同州群的你的州(选择和转移)竞争相同的财产(myBorders的背景)。您将不得不添加另一个元素(可能是矩形)并在其中一个状态中更改元素背景。

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.

通常,您不应该从不同状态组中的状态操纵同一元素的相同属性。可视状态管理器不知道如何处理这种情况,因为它不知道哪个状态应该优先。