WPF ToggleButton自定义样式

最新推荐文章于 2025-10-11 14:45:03 发布

原创最新推荐文章于 2025-10-11 14:45:03 发布 · 7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#wpf

WPF 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在WPF中为ToggleButton控件创建自定义样式，包括改变背景颜色、边框效果、鼠标悬停状态及选中状态的样式调整，帮助开发者提升UI界面的视觉体验。

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna" mc:Ignorable="d"
	x:Class="WpfAppButton.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="272.5" Height="275" Background="#FFA1B4B6">

	<Window.Resources>
		<Style x:Key="ButtonFocusVisual">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFFFFFFF" Offset="0"/>
			<GradientStop Color="#FFF0F0EA" Offset="0.9"/>
		</LinearGradientBrush>
		<Style x:Key="myExpandButtonStyle" TargetType="{x:Type ToggleButton}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
			<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ToggleButton}">
						<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<TransformGroup>
									<ScaleTransform/>
									<SkewTransform/>
									<RotateTransform/>
									<TranslateTransform/>
								</TransformGroup>
							</Grid.RenderTransform>
							<Rectangle Fill="#FF40BE48" Stroke="{x:Null}" StrokeThickness="0" Opacity="0" Margin="4.684,3.979,6.378,5.834" RadiusY="0" Height="Auto" VerticalAlignment="Stretch"/>
							<Path x:Name="path" Data="M5.8980706,13.542352 L15.316946,5.1993148 24.897892,13.618299 20.877304,13.646207 15.248735,8.7229148 9.5104679,13.611588 z" Height="11.438" Margin="4.672,3.979,6.39,0" Stretch="Fill" VerticalAlignment="Top" StrokeThickness="0" Opacity="0.995" Stroke="#FF18ED7D" Fill="#FF0FA33A" HorizontalAlignment="Center" Width="23.212"/>
							<Path x:Name="path2" Data="M5.8980706,13.542352 L15.316946,5.1993148 24.897892,13.618299 20.877304,13.646207 15.248735,8.7229148 9.5104679,13.611588 z" Height="Auto" Margin="4.684,14.083,6.354,6.98" Stretch="Fill" VerticalAlignment="Stretch" StrokeThickness="0" Opacity="0.995" Stroke="#FF18ED7D" Fill="#FF0FA33A" HorizontalAlignment="Stretch" Width="Auto"/>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger Property="IsMouseOver" Value="True">
								<Setter Property="Fill" TargetName="path" Value="#FF0FDA25"/>
								<Setter Property="Fill" TargetName="path2" Value="#FF0FDA25"/>
							</Trigger>
							<Trigger Property="IsKeyboardFocused" Value="true"/>
							<Trigger Property="ToggleButton.IsChecked" Value="true">
								<Setter Property="RenderTransform" TargetName="grid">
									<Setter.Value>
										<TransformGroup>
											<ScaleTransform/>
											<SkewTransform/>
											<RotateTransform Angle="180"/>
											<TranslateTransform/>
										</TransformGroup>
									</Setter.Value>
								</Setter>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>

	<Grid x:Name="LayoutRoot">
		<ToggleButton  Name="toggle"  Focusable="False" Content="expand" HorizontalAlignment="Left" Height="32.501" Margin="50.333,154.333,0,0" VerticalAlignment="Top" Width="34.25" Style="{DynamicResource myExpandButtonStyle}" BorderBrush="{x:Null}" RenderTransformOrigin="0.5,0.5">
			<ToggleButton.RenderTransform>
				<TransformGroup>
					<ScaleTransform ScaleX="0.6" ScaleY="0.6"/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</ToggleButton.RenderTransform>
		</ToggleButton>
	</Grid>
</Window>