Question

我正在尝试设置一个ListBoxItem，使项目在选中时为绿色，当鼠标悬停在项目上时为lightgreen。

这样可行，但是当选择一个项目并将鼠标移到该项目上时，所选样式将消失。我该如何解决这个问题？

<Style x:Key="{x:Type ListBoxItem}"
                TargetType="ListBoxItem">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="SnapsToDevicePixels"
                Value="true" />
            <Setter Property="OverridesDefaultStyle"
                Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Border"
                                Margin="0,3,0,3"
                                SnapsToDevicePixels="true">
                            <Border.Background>
                                <SolidColorBrush Color="Transparent" />
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="Green" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Textblock"
                                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="White" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="LightGreen" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <TextBlock x:Name="Textblock" 
                                       FontFamily="Segoe UI" Foreground="{StaticResource AlmostWhite}" FontSize="15" Padding="5,7,5,7" VerticalAlignment="Center">
                                <ContentPresenter  />
                            </TextBlock>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

如果您使用触发器选项，则可以使用MultiTriggers表示在选择项目时不应用MouseOver颜色。

下面是MultiTriggers的样式，当选择Item时，MouserOver不会覆盖背景。

<Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="Green" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="LightGreen" />
        </MultiTrigger>
    </Style.Triggers>
</Style>

不确定，如何通过VSM实现这一目标，我将关注此主题以获得更好的答案。

Answer 2

正如@Novitchi S所提到的，使用基本的Style来定义Trigger会更简单：

<Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="Green" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="LightGreen" />
        </Trigger>
    </Style.Triggers>
</Style>

即使您真的想使用Storyboard，也可以将其添加到Trigger.EnterActions部分。

更新＆gt;＆gt;＆gt;

确实没有必要使用MultiTrigger来满足您的要求。当鼠标悬停在项目上时，我可能没有发现你要求保留所选颜色......你只需要颠倒Trigger的顺序......后者将“覆盖”行为前一个：

<Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="LightGreen" />
        </Trigger>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="Green" />
        </Trigger>
    </Style.Triggers>
</Style>

由MouseOver样式覆盖的选定样式

2 个答案: