Question

我目前正在研究ComboBox控件的样式。弹出部分包含可供选择的所有项目。预选项目具有背景颜色，所有其他项目仅为白色。使用默认样式时，当该弹出窗口中的任何项目悬停时，它将获得与所选项目相同的背景颜色，并且所选项目将失去其特殊突出显示。我无法使用VisualStateManager。

有两组：CommonStates和SelectionStates。 CommonStates包含状态名称MouseOver，它在项目悬停时应用。 SelectionStates包含状态名称Selected，它适用于所选的一个项目。

我为这两种状态设置了背景颜色。现在发生以下情况：打开弹出窗口时，仅突出显示所选项目。当我悬停任何项目时，此项目也会突出显示。所选项目仅在悬停一次后永久失去其突出显示。

我希望所选项目永久失去颜色，并在另一个项目悬停时立即失去颜色，就像使用默认平台样式一样。

如何做到这一点？我需要在这里使用触发器而不是VisualStateManager吗？

以下是一些基于http://msdn.microsoft.com/en-us/library/ms752094%28v=vs.100%29.aspx的XAML代码：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimationUsingKeyFrames
                    Storyboard.TargetName="Border"
                    Storyboard.TargetProperty="(Panel.Background).Color">
                    <EasingColorKeyFrame KeyTime="0" Value="#9bceff" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled"/>
    </VisualStateGroup>
    <VisualStateGroup x:Name="SelectionStates">
        <VisualState x:Name="Unselected" />
        <VisualState x:Name="Selected">
            <Storyboard>
                <ColorAnimationUsingKeyFrames
                    Storyboard.TargetName="Border"
                    Storyboard.TargetProperty="(Panel.Background).Color">
                    <EasingColorKeyFrame KeyTime="0" Value="#9bceff" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="SelectedUnfocused">
            <Storyboard>
                <ColorAnimationUsingKeyFrames
                    Storyboard.TargetName="Border"
                    Storyboard.TargetProperty="(Panel.Background).Color">
                    <EasingColorKeyFrame KeyTime="0" Value="#dddddd" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Answer 1

请注意所有群组并行“直播”。这意味着每个组的一个状态是活动的。缺点是如果您从不同的组修改相同的元素，则最后一个设置获胜。在您的情况下，您修改两个组的目标“边框”。唯一的解决方案是添加另一个控件，在SelectionState中修改，在CommonStates中修改另一个。

Answer 2

试试这个

 <Style x:Key="ComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Grid>
                        <Border x:Name="Border" Background="Transparent">
                            <TextBlock FontSize="12" FontFamily="Segoe UI Light">
                            <ContentPresenter></ContentPresenter>
                            </TextBlock>
                        </Border>                         
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ComboBoxItem.IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="#9bceff"></Setter>
                        </Trigger>
                        <Trigger Property="ComboBoxItem.IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightGray"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>         
    </Style>

VisualStateManager中组的组合

2 个答案: