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 =“停止”，它会做你想要的吗？

<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>

单击

1 个答案: