WPF 自定义按钮

 

 WPF 自定义按钮

 

在WPF中自定义按钮显得非常的简单。下面我们看看例子。

 

<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Window.Resources> <Style x:Key="EllipseButton" TargetType="Button"> <Setter Property="Height" Value="100"/> <Setter Property="Width" Value="100" /> <Setter Property="Foreground" Value="White"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Name="EllipseButtonBackground" StrokeThickness="3"> <Ellipse.Stroke> <LinearGradientBrush StartPoint="0.0,0" EndPoint="0.0,1"> <GradientStop Offset="0" Color=" SlateGray" ></GradientStop> <GradientStop Offset="1.0" Color="DarkKhaki" ></GradientStop> </LinearGradientBrush> </Ellipse.Stroke> <Ellipse.Fill> <LinearGradientBrush StartPoint="0.0,0" EndPoint="0.0,1"> <GradientStop Offset="0" Color="#ccffff" ></GradientStop> <GradientStop Offset="1.0" Color="Black" ></GradientStop> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Margin="15,5,15,50" > <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > <GradientStop Offset="0" Color="#ffffff" ></GradientStop> <GradientStop Offset="1" Color="Transparent"></GradientStop> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <ContentPresenter Name="EllipseButtonContent" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Ellipse.Fill" TargetName="EllipseButtonBackground"> <Setter.Value> <RadialGradientBrush RadiusX="0.5" RadiusY="0.5" Center="0.5,0.5"> <GradientStop Offset="0" Color="Orange"></GradientStop> <GradientStop Offset="1" Color="Purple"></GradientStop> </RadialGradientBrush> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Ellipse.Fill" TargetName="EllipseButtonBackground"> <Setter.Value> <RadialGradientBrush RadiusX="0.5" RadiusY="0.5" Center="0.5,0.5"> <GradientStop Offset="0" Color="Orange"></GradientStop> <GradientStop Offset="1" Color="Green"></GradientStop> </RadialGradientBrush> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <Button Content="Button" Name="button1" Style="{StaticResource ResourceKey=EllipseButton}" mce_Style="{StaticResource ResourceKey=EllipseButton}"/> </Grid> </Window>                                                   

 

 

 

分别是普通/MouseOver/Pressed的状态的按钮。