VisualStateManager 中的组组合答案

【问题标题】：Combinations of groups in a VisualStateManagerVisualStateManager 中的组组合
【发布时间】：2014-01-06 15:50:57
【问题描述】：

我目前正在研究 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>

【问题讨论】：

标签： wpf

【解决方案1】：

请注意，所有组都并行“生活”。这意味着每个组的一个状态是活动的。缺点是如果您从不同组修改相同元素，则最后一个设置获胜。在您的情况下，您从两个组中修改目标“边界”。唯一的解决办法就是再增加一个控件，在SelectionState中修改on，另一个在CommonStates中。

【讨论】：

我只是想将此添加到我的问题中：我可以指定来自不同组的状态组合吗？说，MouseOver AND Selected，然后做其他事情？例如，与 MultiTrigger 一样。
不幸的是，VisualStates 不提供组合。
总的来说，我喜欢 VisualStates。但有时需要一些创造力。通常显示/隐藏覆盖的控件。现在我对你的特殊情况有个好主意。

【解决方案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>

【讨论】：