WPF 自定义各类按钮样式

WPF 自定义各类按钮样式（Button，ToggleButton，RadioButton）

示例一、对Button控件使用触发器修改样式

一般只修改外观和一些事件触发样式的改变

<Window.Resources><Style TargetType="Button" x:Key="DefaultButton"><Style.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" Value="#336633 "></Setter><Setter Property="FontSize" Value="18"></Setter></Trigger></Style.Triggers><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}"><ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"></ContentPresenter></Border></ControlTemplate></Setter.Value></Setter><Setter Property="Background" Value="Green"></Setter><Setter Property="Foreground" Value="White"></Setter><Setter Property="Cursor" Value="Hand"></Setter></Style></Window.Resources><Grid><Button Width="100" Height="30" Content="测试" Style="{StaticResource DefaultButton}"></Button></Grid>

或者也可以直接这样写：

<Button Content="测试" Width="100" Height="30" Margin="30"><Button.Style><Style TargetType="Button"><Style.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" Value="#336633 "></Setter><Setter Property="FontSize" Value="18"></Setter></Trigger></Style.Triggers><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}"><ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"></ContentPresenter></Border></ControlTemplate></Setter.Value></Setter><Setter Property="Background" Value="Green"></Setter><Setter Property="Foreground" Value="White"></Setter><Setter Property="Cursor" Value="Hand"></Setter></Style></Button.Style></Button>

执行效果：

二、对Button控件使用控件模板修改样式

<Window.Resources><Style x:Key="BtnInfoStyle" TargetType="Button"><Setter Property="Width" Value="70"/><Setter Property="Height" Value="25"/><Setter Property="Foreground" Value="White"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Background" Value="#43a9c7"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"><TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="border" Property="Background" Value="#2f96b4"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="border" Property="Background" Value="#2a89a4"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><Button Width="100" Height="30" Content="测试" Style="{StaticResource BtnInfoStyle}"></Button></Grid>

执行效果：

常用颜色搭配：

Background=“#DA4453” MouseOverBackground=“#ED5565” //深红色

Background=“#3BAFDA” MouseOverBackground=“#4FC1E9” //蓝色

Background=“#3399FF” MouseOverBackground=“#65B2FF” //深蓝色

Background=“#FF9900” MouseOverBackground=“#FFB23F” //橙色

Background=“#00CC66” MouseOverBackground=“#3FD98C” //绿色

Background=“#FF5602” MouseOverBackground=“#FF7F3F” //深橙色

三、Button控件中加入图片（鼠标进入图片不变）

<Window.Resources><Style x:Key="Help_btn" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="button"BorderThickness="0"Background="{TemplateBinding Background}"SnapsToDevicePixels="True"></Border></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><Button Name="btn_help" Width="25" Height="25" ToolTip="使用说明" BorderThickness="0" Style="{StaticResource Help_btn}" Cursor="Hand"><Button.Background><ImageBrush ImageSource="Images/msg.png" Stretch="Uniform"></ImageBrush></Button.Background></Button></Grid>

执行效果：

四、Button控件中加入图片（鼠标进入图片改变）

<Window.Resources><ImageBrush x:Key="CloseBtn_MouseOver" ImageSource="Images/nail1.png"></ImageBrush><Style x:Key="Close_btn" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="button"BorderThickness="0"Background="{TemplateBinding Background}"SnapsToDevicePixels="True"></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" TargetName="button" Value="{StaticResource CloseBtn_MouseOver}"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><Button x:Name="CloseBtn" Height="30" Width="30" BorderThickness="0" Style="{StaticResource Close_btn}" ><Button.Background><ImageBrush ImageSource="Images/nail.png"></ImageBrush></Button.Background></Button></Grid>

执行效果：

五 、ToggleButton控件的样式

<Window.Resources><ImageBrush x:Key="btn_TopMost" ImageSource="Images/nail1.png"></ImageBrush><Style x:Key="Nail_btn" TargetType="{x:Type ToggleButton}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ToggleButton}"><Border x:Name="button"BorderThickness="0"Background="{TemplateBinding Background}"SnapsToDevicePixels="True"></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter Property="Background" TargetName="button" Value="{StaticResource btn_TopMost}"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><ToggleButton Name="btn_Nail" Width="20" Height="20" BorderThickness="0" Margin="0 0 10 0" Style="{StaticResource Nail_btn}" Cursor="Hand"><ToggleButton.Background><ImageBrush x:Name="nail_background" ImageSource="Images/nail.png" Stretch="UniformToFill"></ImageBrush></ToggleButton.Background></ToggleButton></Grid>

执行效果：

六、RadioButton控件样式

<Window.Resources><Style TargetType="RadioButton" x:Key="rbtnStyle"><Setter Property="Margin" Value="5,0"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="RadioButton"><Border Background="#EEE" CornerRadius="5" x:Name="back"><TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,5"/></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter Property="Background" Value="Orange" TargetName="back"/><Setter Property="Foreground" Value="White"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><StackPanel Orientation="Horizontal"><RadioButton Content="A类" Width="80" Height="30" Style="{StaticResource rbtnStyle}"></RadioButton><RadioButton Content="B类" Width="80" Height="30" Style="{StaticResource rbtnStyle}"></RadioButton><RadioButton Content="C类" Width="80" Height="30" Style="{StaticResource rbtnStyle}"></RadioButton></StackPanel>

执行效果：

六、Button中图片和文字同时显示

执行效果：

代码：

<Window.Resources><!--主窗体最小化、最大化、关闭样式--><Style x:Key="top_button" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}"><ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"></ContentPresenter></Border></ControlTemplate></Setter.Value></Setter><Setter Property="FontSize" Value="18"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Background" Value="Transparent"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="Gray"/></Trigger><Trigger Property="IsMouseOver" Value="False"><Setter Property="Foreground" Value="Black"/></Trigger></Style.Triggers></Style><Style x:Key="BtnInfoStyle001" TargetType="Button"><Setter Property="Foreground" Value="White"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Background" Value="#FF9900"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border x:Name="border" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"><Grid><Grid.RowDefinitions><RowDefinition Height="2*"/><RowDefinition Height="*"/></Grid.RowDefinitions><TextBlock Grid.Row="0" Text="&#xe6a8;" FontFamily="/fonts/#iconfont" FontSize="50" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold"/><TextBlock Grid.Row="1" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Opacity" Value="0.8"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="BtnInfoStyle002" TargetType="Button"><Setter Property="Foreground" Value="White"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Background" Value="#43a9c7"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border x:Name="border" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"><Grid><Grid.RowDefinitions><RowDefinition Height="2*"/><RowDefinition Height="*"/></Grid.RowDefinitions><TextBlock Grid.Row="0" Text="&#xe6aa;" FontFamily="/fonts/#iconfont" FontSize="50" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold"/><TextBlock Grid.Row="1" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Opacity" Value="0.8"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Window.Effect><DropShadowEffect BlurRadius="5" Color="#FF858484" Direction="0" ShadowDepth="1"/></Window.Effect><Grid><Grid.RowDefinitions><RowDefinition Height="30"/><RowDefinition/></Grid.RowDefinitions><Grid Grid.Row="0" Background="White" Name="topNav" MouseLeftButtonDown="topNav_MouseLeftButtonDown"><TextBlock Text="小程序" VerticalAlignment="Center" Margin="10 0 0 0"/><StackPanel Orientation="Horizontal" HorizontalAlignment="Right"><Button Content="─" Width="45" Height="30" Style="{StaticResource top_button}" Name="button_MiniSize" Click="button_MiniSize_Click" /><Button Content="✕" Width="45" Height="30" Style="{StaticResource top_button}" Name="button_Close" Click="button_Close_Click" /></StackPanel></Grid><Grid Grid.Row="1" Background="#F0F0F0"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Border Grid.Column="0" Margin="40 40 20 40"><Button Content="客户方案一" Style="{StaticResource BtnInfoStyle001}" Name="btn_Progress" Click="btn_Progress_Click"></Button></Border><Border Grid.Column="1" Margin="20 40 40 40"><Button Content="客户方案二" Style="{StaticResource BtnInfoStyle002}" Name="btn_Stantable" Click="btn_Stantable_Click"></Button></Border></Grid></Grid>

七、文本按钮

效果：

代码：

<Window.Resources><Style x:Key="TextButton1" TargetType="{x:Type Button}"><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Cursor" Value="Hand"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="Red"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="TextButton2" TargetType="{x:Type Button}"><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Cursor" Value="Hand"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><TextBlock Text="{TemplateBinding Content}" Name="text" VerticalAlignment="Center" HorizontalAlignment="Center" TextDecorations="UnderLine"/><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Foreground" TargetName="text" Value="Red"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><StackPanel><Button Width="100" Height="30" Content="分析" Style="{StaticResource TextButton1}" Margin="10" Foreground="Blue" FontSize="14"/><Button Width="100" Height="30" Content="测试" Style="{StaticResource TextButton2}" Margin="10" Foreground="Blue" FontSize="14" Cursor="Hand"/></StackPanel>