我正在尝试重新创建材料设计外观&感觉一个按钮。对于专注(悬停)指南,指南说要在按钮上制造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>
如果还有其他方法可以这样做,我也所有人:)
在矩形的填充中,您可以在#00000000(例如#00000000)中指定不透明度,前两个值是不透明度。因此12%将是#1E000000。以下将显示.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>
更新:
如果有人想重用类似材料的按钮的代码,则代码在下面。我使用了此堆叠式花道的连锁效果以及该来源的阴影。希望这可以帮助其他人在没有工具包的情况下重新创建材料设计:)
<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>