WPF做软件界面时，有时候需要自定义控件的样式，下面介绍按钮的自定义样式方法
一、圆角渐变色按钮：
<Button Cursor="Hand" Name="button1" Opacity="1" Grid.Column="3" Grid.Row="1" Click="button1_Click" Grid.ColumnSpan="3" Grid.RowSpan="2" Foreground="#FF7C7C03">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="33,33,33,33" 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>
</Button.Template>
</Button>预览效果如下：
CornerRadius中的值即是设置圆角的值。
二、按钮自定义样式进阶：
（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>平等地在其后面添加一个
<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>
其区别请读者自行研究。
延伸学习阅读：wpf学习—样式style
http://www.cnblogs.com/lhx880619/archive/2011/12/22/2298530.html
评论回复