原文:
一个立体感的按钮样式
<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>