单击后按钮的嵌套样式触发器未执行

Question

我尝试重新创建一种材料设计按钮。此按钮的动画之一是，鼠标上的颜色是按钮的颜色更改为原始颜色的深色色调。

为了实现每种颜色的意识，我用矩形叠加按钮，并根据鼠标或不进行鼠标的不透明度在25％至0％之间。这种样式以矩形的样式实现。但是看来这种样式仅在我单击之前执行。单击按钮后，此样式触发器将不再执行。

我还实施了一个动画，将矩形的不透明度更改为单击按钮时的40％。但是，该动画在第一次点击之后仍然可见。

我认为这可能是因为矩形的样式包含在控制模板中。但是我不知道如何将这些样式从控制模板中提取到按钮的样式。

<Style x:Key="MaterialFlatButton" TargetType="Button">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                   <Grid>
                            <Rectangle RadiusX="4" RadiusY="4" Fill="#000000" Panel.ZIndex="1" x:Name="Reccie">
                                <Rectangle.Style>
                                    <Style TargetType="{x:Type Rectangle}">
                                        <Setter Property="Opacity" Value="0"/>
                                        <!--These styles-->
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter  Property="Opacity" Value="0.26"/>
                                            </Trigger>
                                            <Trigger Property="IsMouseOver" Value="false">
                                                <Setter  Property="Opacity" Value="0"/>
                                            </Trigger>
                                            <EventTrigger RoutedEvent="MouseLeftButtonDown">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.4" Duration="0:0:0.25"/>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Rectangle.Style>
                            </Rectangle>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"
                                              Margin="16 0 16 0" TextBlock.FontFamily="{StaticResource LatoMedium}"
                                              TextBlock.FontSize="{StaticResource FontSizeBody}" Typography.Capitals="AllSmallCaps"/>
                        </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <!--Should go here perhaps?-->
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="#000000"/>
                <Setter Property="Opacity" Value="0.26"/>
            </Trigger>
        </Style.Triggers>
</Style>

Answer 1

编辑：如果您设置fillbehavior =" stop"？

<EventTrigger RoutedEvent="MouseLeftButtonDown">
    <BeginStoryboard>
        <Storyboard FillBehavior="Stop">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.26" To="0.4" Duration="0:0:0.25"/>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>