WPF材质设计按钮悬停

时间:2019-07-15 12:08:34

标签: c# wpf button material-design

我正在为WPF项目使用Material Design,现在我想为按钮的悬停状态设置背景颜色。 如代码所示,该实现是通过ProgressBar,Ripple和Border进行的。

如果我尝试覆盖样式,我最终将看到一个不可见的按钮:

<Style TargetType="{x:Type Button}"
       BasedOn="{StaticResource MaterialDesignRaisedButton}">
    <Setter Property="Background"
            Value="{StaticResource MainColorSolidBrush}" />
    <Setter Property="Foreground"
            Value="{StaticResource TextColorLightSolidBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <ControlTemplate.Triggers>

                    <!--Hover-->
                    <Trigger Property="IsMouseOver"
                             Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                                    To="{StaticResource SubColor}"
                                                    FillBehavior="HoldEnd"
                                                    Duration="{StaticResource HoverStartDuration}" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                                    To="{StaticResource MainColor}"
                                                    FillBehavior="Stop"
                                                    Duration="{StaticResource HoverEndDuration}" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>

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

那么我是否必须从包装中重新实现原始样式并添加悬停?

1 个答案:

答案 0 :(得分:1)

您不能仅“覆盖”模板的一部分。必须将其定义为一个整体,这意味着您应该从GitHub复制MaterialDesignRaisedButton样式并根据需要进行编辑,例如,向IsMouseOver触发器添加其他设置器。