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

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

为您的IsMouseOver BeginStoryBoard个对象命名。
在StopStoryBoard IsPressed中的两个Trigger.EnterActions个对象中使用这些名称。
撤消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的情况下做到这一点，但让两者都不会受到伤害。

Answer 2

看起来最后的触发器获胜（尝试更改触发器的顺序，首先是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>

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

2 个答案: