原文: 一个立体感的按钮样式
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderBrush="#EFEFEF" BorderThickness="6" CornerRadius="35">
<Border.Background>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
<GradientStop Offset="0" Color="#E24E59" />
<GradientStop Offset="0.1" Color="#FA5A62" />
<GradientStop Offset="0.9" Color="#FA5A62" />
<GradientStop Offset="1" Color="#E24E59" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Width="110" Margin="0" HorizontalAlignment="Left">
<Border Margin="-0.5" CornerRadius="32">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Direction="270" Opacity="0.6" ShadowDepth="2"
Color="Brown" />
</Border.Effect>
<Border.Background>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
<GradientStop Offset="0" Color="#F7F7F7" />
<GradientStop Offset="1" Color="#D2D2D2" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Width="30" Height="30" Margin="0,0,10,0" HorizontalAlignment="Right"
BorderThickness="5" CornerRadius="100">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.5, 0.5">
<GradientStop Offset="0" Color="#FA5A62" />
<GradientStop Offset="0.55" Color="#FA5A62" />
<GradientStop Offset="1" Color="#E24E59" />
</RadialGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
<GradientStop Offset="0" Color="#CBD5D1" />
<GradientStop Offset="1" Color="#EFEFE1" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Grid>
<TextBlock Grid.Column="1" Text="OFF" HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="#BE3A3A"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid Background="#222222">
<Viewbox Width="400">
<ToggleButton Width="190" Height="70" />
</Viewbox>
</Grid>
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuUTN0M2N4EGOmRTZ3ETN2Q2MiZWOkNGO1YjMhBTOklzNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)