WPF Material Design 凸起的按钮悬停状态

Posted 2023-02-16

【中文标题】WPF Material Design 凸起的按钮悬停状态

【英文标题】：WPF Material Design Raised Button Hovered state

【发布时间】：2017-12-27 08:30:03

【问题描述】：

我正在尝试为按钮重新创建材料设计外观。对于聚焦（悬停）状态，指南说要在按钮上设置 12 % #000000 阴影。我想知道如何在 WPF 中实现这一点。

我一直在寻找一个不错的选择，即在按钮上添加一个不可点击的矩形，不透明度为 12%，颜色为 #000000。我想将其实现为一种样式，但我不知道该怎么做。

我现在的风格是这样的：

<Style x:Key="MaterialRaisedButton" TargetType="ToggleButton">
        <Setter Property="Padding" Value="8 0"/>
        <Setter Property="Margin" Value="8 6 8 6"/>
        <Setter Property="Height" Value="36"/>
        <Setter Property="MinWidth" Value="64"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="StaticResource MaterialSecondaryColorBrush"/>
        <Setter Property="Effect" Value="StaticResource z-depth2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                    <Rectangle RadiusX="4" RadiusY="4" Fill="#000000" Opacity="0.12"/>
                    <Border CornerRadius="4" Background="TemplateBinding Background">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="StaticResource Material12Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>

如果还有其他方法可以做到这一点，我也很乐意 :)

【问题讨论】：

This 可能无法回答您的问题，但可能会有所帮助。

@FilipCordas 谢谢，我已经知道那个库，但不幸的是，由于公司决策，我无法添加控制库，所以我必须制作轻量级副本；）

制作 12% 阴影颜色的最佳方法是定义一个 SolidBrush，将 Color 设置为 Black，并将 Opacity 设置为 0.12。如果您将其用作按钮的背景（与其他样式一起使用），它应该会自动为您提供所需的内容。

【参考方案1】：

在矩形的填充中，您可以指定十六进制颜色的不透明度，如#00000000，前两个值是不透明度。所以 12% 将是#1e000000。当鼠标悬停时，以下将显示 0.5 的不透明度矩形，否则不透明度为 0。

 <Rectangle.Style>
            <Style TargetType="x:Type Rectangle">
                <Setter Property="Opacity" Value="0"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter  Property="Opacity" Value=".5"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="false">
                        <Setter  Property="Opacity" Value="0"/>
                    </Trigger>

                </Style.Triggers>
            </Style>
        </Rectangle.Style>

    </Rectangle>

【参考方案2】：

更新：

如果有人想将代码重用于类似材质的按钮，代码如下。我使用了来自this ***er 的涟漪效果以及来自this source 的阴影。希望这可以帮助其他人在没有工具包的情况下重新创建 Material Design :)

<Style x:Key="MaterialRaisedButton2" TargetType="Button">
        <Setter Property="Padding" Value="8 0"/>
        <Setter Property="Margin" Value="8 6 8 6"/>
        <Setter Property="Height" Value="36"/>
        <Setter Property="MinWidth" Value="64"/>
        <Setter Property="Foreground" Value="StaticResource NormalTextBrush"/>
        <Setter Property="Background" Value="StaticResource MaterialSecondaryColorBrush"/>
        <Setter Property="Effect" Value="StaticResource z-depth2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <cons:RippleEffectDecorator Height="TemplateBinding Height" Width="TemplateBinding Width"  Background="TemplateBinding Background" HighlightBackground="#1e000000" Grid.Row="0" Grid.Column="0" Panel.ZIndex="0">
                        <Grid>
                            <Rectangle RadiusX="4" RadiusY="4" Fill="#1e000000" Panel.ZIndex="1">
                                <Rectangle.Style>
                                    <Style TargetType="x:Type Rectangle">
                                        <Setter Property="Opacity" Value="0"/>
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter  Property="Opacity" Value="0.12"/>
                                            </Trigger>
                                            <Trigger Property="IsMouseOver" Value="false">
                                                <Setter  Property="Opacity" Value="0"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </Rectangle.Style>
                            </Rectangle>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </cons:RippleEffectDecorator>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Background" Value="#1FFFFFFF"/>
                <Setter Property="Foreground" Value="#42FFFFFF"/>
            </Trigger>
        </Style.Triggers>
    </Style>