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

Question

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

我为按钮创建了样式，并向模板添加了一些触发器。 一个用于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>

Answer 1

此解决方案包括三个部分：

1. 将您的IsMouseOver BeginStoryBoard对象命名。
2. 在IsPressed Trigger.EnterActions中的两个StopStoryBoard对象中使用这些名称。
3. 反转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情况下完成StopStoryboard ，但是让它们都不会受到伤害。

Answer 2

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

您确实应该将VisualStateManager用于此类内容。

有关如何使用VSM的信息，请参阅msdn上的默认按钮模板。

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>