WPF材料设计凸起按钮悬停状态

时间:2017-12-27 08:30:03

标签: c# wpf material-design togglebutton

我正在尝试重新创建材料设计外观和感觉一个按钮。对于聚焦(悬停)状态,指南说要在按钮上产生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>

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

更新

如果有人想要将代码重用于类似材料的按钮,则代码如下所示。我使用this stackoverflower的涟漪效果和this source的阴影。希望这可以帮助其他人在没有工具包的情况下重新创建材料设计:)

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