wpf自定义按钮样式

wpf采用xaml文件的方式来向开发者提供绘制界面的平台。本篇我将根据自己在编写软件过程中的经历，向大家介绍一下如果自定义按钮的样式。通过这些介绍，你可以做出带圆角的按钮，带图标的按钮，颜色渐变的按钮，以及设置在鼠标经过，以及点击时按钮的样式。

（1）先看效果：

第一个是带圆角和渐变背景的按钮（蓝色是界面背景，与按钮无关）：

正常状态鼠标停留时的样式（按钮变亮）

第二个是半透明按钮：类似于qq的关闭按钮（同样墨绿色和粉红色是界面背景上的与按钮无关）

正常状态（从上到下由于墨绿色变透明）鼠标停留后的样式（背景从上到下由红变透明）

第三种是带图标的按钮（蓝色背景同样是界面背景，与按钮无关）

正常状态鼠标停留后的样式（边框发光）点击后的样式（边框发黑）

（2）为达到上面的效果你需要做的仅仅是在按钮的xaml代码中添加一段模板代码，然后根据自己的需要对代码进行一些修改：

原始代码：

第一种效果按钮的代码：

<Button x:Name="Button_Login" Content="登    录" HorizontalAlignment="Left" Margin="111,222,0,0" VerticalAlignment="Top" Width="120" Height="32" IsDefault="True" Click="Button_Login_Click">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="Silver" Offset="0.5" />
                                <GradientStop Color="White" Offset="0.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" TargetName="PART_Background">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="Silver" Offset="0.0" />
                                        <GradientStop Color="White" Offset="0.5" />
                                        <GradientStop Color="Silver" Offset="0.0" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

第二种效果代码：

<Button Content="×" HorizontalAlignment="Left" Height="21" Margin="353,0,0,0" VerticalAlignment="Top" Width="22" Foreground="White" BorderBrush="#FF285A5C" Click="Button_Click" Background="Transparent" FontWeight="Bold" IsTabStop="False">
            <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" Name="PART_Background">
                            <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FF484753" Offset="0.0" />
                                <GradientStop Color="Transparent" Offset="1" />
                            </LinearGradientBrush>
                        </Border.Background>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" TargetName="PART_Background">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="#FF90250E" Offset="0.0" />
                                        <GradientStop Color="Transparent" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    <Trigger Property="ButtonBase.IsPressed" Value="True">
                        <Setter Property="UIElement.Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            </Button.Template>
        </Button>

第三种效果代码：

<Button HorizontalAlignment="Left" Margin="279,222,0,0" VerticalAlignment="Top" Width="37" Height="38" BorderBrush="Transparent" BorderThickness="0" ToolTip="忘记密码" IsTabStop="False">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="Transparent" Offset="0.0" />
                                <GradientStop Color="Transparent" Offset="0.0" />
                                <GradientStop Color="Transparent" Offset="0.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>                       
                        <Rectangle Width="40" Height="40">
                            <Rectangle.Fill>
                                <ImageBrush  Stretch="Fill" ImageSource="button_ForgetPwd.png" />
                            </Rectangle.Fill>
                        </Rectangle>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Yellow" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

其实三段代码大同小异，如果你直接要和上述三种按钮一样的样式，直接复制代码即可，如果需要详细了解以便设计自己的按钮样式，则以第一个按钮的代码为例，我们详细研究一下代码各部分的作用。

（3）、代码分析

① <Button x:Name="Button_Login" Content="登录" HorizontalAlignment="Left" Margin="111,222,0,0" VerticalAlignment="Top" Width="120" Height="32" IsDefault="True" Click="Button_Login_Click">

这个是经典的按钮样式，各个属性的具体功能就不再介绍了，但是需要注意的是，和系统默认的button xaml代码不同的地方是后>没有/与之对应的是在这段代码最后应该有</Button>来包裹代码，学过标记语言的朋友肯定知道这个。如果没有学习过标记语言，需要稍微了解一下，至少知道它是一种嵌套结构的语言。

②在<button></button>的下一级标签是<Button.Template></ Button.Template >，它的下一级仅嵌套了一个< ControlTemplate >< /ControlTemplate >是一个类似于容器的标记。而它的下一级主要分为两大部分。第一部分是确定按钮上都有哪些东西。如果只需要设置按钮样式而需要添加背景图片呢么只需要一个<Border></Border>标签即可。可以参看第一个，第二个按钮，他们在< ControlTemplate >< /ControlTemplate >中的第一部分内容是：

<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="Silver" Offset="0.5" />
                                <GradientStop Color="White" Offset="0.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>

其中CornerRadius="8,8,8,8"表示按钮的上下左右圆角，可以通过设置此处的参数来改变按钮的形状。不一定是四个角都是圆角，可以根据自己的需要，对四个角进行设置。最内部的三个GradientStop是用来控制按钮的背景颜色的。Color可以直接指定颜色名称，也可以通过RGB颜色指定。Offset表示该颜色的垂直起始位置。而其后的数字为距离顶端的百分比。这里的GradientStop可以有n多个。用以设置按钮从上到下几中不同的颜色变化上述代码是从0-按钮的0.5处由白变银，05-1处由银变白。而对于第二种样式按钮需要从红色渐变为透明，因此需要两个GradientStop，第一个颜色红色，offset0，第二个transparent（透明），offset1.有了这个可以在按钮任意位置设置任意颜色。

但是如果不仅仅要设置按钮样式，还要为按钮添加背景图片，那么就需要用<Grid></Grid>包裹<Border></Border>标签。与<Border></Border>平等地在其后面添加一个

<Rectangle Width="40" Height="40">
                            <Rectangle.Fill>
<ImageBrush  Stretch="Fill" ImageSource="button_ForgetPwd.png" />
                            </Rectangle.Fill>
                        </Rectangle>

也就是说这时候< ControlTemplate >< /ControlTemplate >的第一部分标签是<Grid></Grid>

而<Grid></Grid>的下一级包括两部分<Border></Border>用于设置按钮样式，<Rectangle></Rectangle>用于设置背景图片。

③< ControlTemplate >< /ControlTemplate >的第二部分是按钮响应样式，也就是鼠标停留，或者鼠标点击时按钮的样式，它的标签为<ControlTemplate.Triggers></ ControlTemplate.Triggers>

其中包含的是所有的按钮响应样式。其中的每一个响应样式格式为

  <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" TargetName="PART_Background">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="Silver" Offset="0.0" />
                                        <GradientStop Color="White" Offset="0.5" />
                                        <GradientStop Color="Silver" Offset="0.0" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

其中Property用于指示按钮的响应事件类型，Property="UIElement.IsMouseOver"为鼠标停留，Property="ButtonBase.IsPressed"为鼠标按下。而其对应按钮样式的设置方式有两种，如果需要设置按钮颜色，像按钮1一样则内部为如上述代码一样，其样式具体设置方式，与前面按钮默认样式设置一样。而如果仅需要修改边框颜色则可以采用按钮3的方式：

<ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Yellow" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>

其区别请读者自行研究。

本文是我在绘制软件界面时，通过查阅相关资料，并自行揣测理解所得，其间可能有一下谬误或不完善的地方，忘大家多提意见，大家一起进步！

mushao 2014-8-27@hust

wpf自定义按钮样式

AI模型 Llama 3体验笔记

【面试准备】又一次失败的面试经历，题目离谱～资深软件测试工程师

dotnet 8 版本与银河麒麟V10和UOS系统的 glibc 兼容性

You know, for search--帶你認識Elasticsearch

wpf自定義按鈕樣式

玩轉Elasticsearch routing功能

winform中鍵盤和鼠標事件的捕捉和重寫

深入理解Elasticsearch寫入過程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結