一个立体感的按钮样式

Posted 2020-09-29 因你而在

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