按钮模板 - IsMouseOver 在 IsPressed 执行后停止工作答案

【问题标题】：Button Template - IsMouseOver stops working after IsPressed is executed按钮模板 - IsMouseOver 在 IsPressed 执行后停止工作
【发布时间】：2013-10-18 08:20:32
【问题描述】：

我有一个奇怪的问题，希望你能帮助我。

我为按钮创建了一个样式，并在模板中添加了一些触发器。一个用于 IsMouseOver，一个用于 IsPressed。

两个触发器都有一个 EnterAction 和一个 ExitAction 动画模板的背景色。

当我将鼠标悬停在按钮上时，我可以看到颜色发生变化，但是在我点击按钮后，悬停触发器停止工作。

这是一个示例代码：

<Button Margin="142,130,214,138" Content="Hi Mum!">

    <Button.Resources>
        <Color x:Key="backgroundColor" A="255" R="52" G="152" B="219" />
        <Color x:Key="hoverBackgroundColor" A="255" R="62" G="182" B="255" />
        <Color x:Key="pressedBackgroundColor" A="255" R="42" G="122" B="175" />
    </Button.Resources>

    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">

                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="6">
                            <Border.Background>
                                <SolidColorBrush x:Name="backgroundBrush" Color="{StaticResource backgroundColor}" />
                            </Border.Background>

                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                Content="{TemplateBinding Content}" 
                                                ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                                                Focusable="False" 
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                Margin="{TemplateBinding Padding}" 
                                                RecognizesAccessKey="True" 
                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource hoverBackgroundColor}" Duration="0:0:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>

                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource pressedBackgroundColor}" Duration="0:0:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>

                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

【问题讨论】：

标签： c# wpf xaml triggers styles

【解决方案1】：

看起来最后一个触发器获胜（尝试更改触发器的顺序，首先是 IsPressed，其次是 IsMouseOver，你会看到）。

你真的应该使用 VisualStateManager 来处理这类事情。

查看 msdn 上的默认按钮模板了解如何使用 VSM。

http://msdn.microsoft.com/en-us/library/cc278069(v=vs.95).aspx

为 Sheridan 编辑：它就像一个魅力：

<Window.Resources>
        <Color x:Key="OverColor">Blue</Color>
        <Color x:Key="PressedColor">Green</Color>
    </Window.Resources>
    <Grid>
        <Button Content="Hi sheridan!" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Background="LightBlue">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.2"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                                                    To="{StaticResource PressedColor}"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                                                To="{StaticResource OverColor}"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>

                                    <ContentPresenter Content="{TemplateBinding Content}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Grid>

【讨论】：

franssu，如果不使用 StopStoryboard 对象，这将无法工作...试试看。
我指的是您关于更改触发器顺序的评论，这不起作用......也许我应该更具体。
好的，更改顺序只是指出问题所在，而不是解决方案。

【解决方案2】：

这个解决方案分为三个部分：

为您的 IsMouseOver BeginStoryBoard 对象命名。
在 IsPressed Trigger.EnterActions 的两个 StopStoryBoard 对象中使用这些名称。
颠倒您的Trigger 对象的顺序：

你应该得到这样的结果：

<Trigger Property="IsPressed" Value="True">
    <Trigger.EnterActions>
        <StopStoryboard BeginStoryboardName="MouseOverStoryBoard" />
        <StopStoryboard BeginStoryboardName="MouseOverStoryBoard2" />
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource pressedBackgroundColor}" Duration="0:0:0.2" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard Name="MouseOverStoryBoard">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource hoverBackgroundColor}" Duration="0:0:0.2" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard Name="MouseOverStoryBoard2">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

实际上，我认为您可以不使用第二个StopStoryboard，但同时拥有它们不会有什么坏处。

【讨论】：