WPF自定义圆形按钮样式资源文件

时间:2023-03-10 00:53:30
WPF自定义圆形按钮样式资源文件
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="clr-namespace:WpfTest">
     <Style x:Key="RoundedGelButton" TargetType="Button">
         <Setter Property="Width" Value="100"/>
         <Setter Property="Height" Value="100"/>
         <Setter Property="Foreground" Value="White"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Button}">
                     <Grid>
                         <Ellipse Name="GelBackground" StrokeThickness="0.5" Fill="Black">
                             <Ellipse.Stroke>
                                 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                     <GradientStop Offset="0" Color="#ff7e7e7e"></GradientStop>
                                       <GradientStop Offset="1" Color="Black"></GradientStop>
                                 </LinearGradientBrush>
                             </Ellipse.Stroke>
                         </Ellipse>
                         <Ellipse Margin="15,5,15,50">
                             <Ellipse.Fill>
                                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                     <GradientStop Offset="0" Color="#aaffffff"></GradientStop>
                                       <GradientStop Offset="1" Color="Transparent"></GradientStop>
                                 </LinearGradientBrush>
                             </Ellipse.Fill>
                         </Ellipse>
                         <ContentPresenter Name="GelButtonContent" VerticalAlignment="Center" HorizontalAlignment="Center"
                                           Content="{TemplateBinding Content}"/>
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter Property="Ellipse.Fill" TargetName="GelBackground">
                                 <Setter.Value>
                                     <RadialGradientBrush>
                                           <GradientStop Offset="0" Color="Lime"></GradientStop>
                                       <GradientStop Offset="1" Color="DarkGreen"></GradientStop>
                                     </RadialGradientBrush>
                                 </Setter.Value>
                             </Setter>
                         </Trigger>
                          <Trigger Property="IsPressed" Value="True">
                             <Setter Property="Ellipse.Fill" TargetName="GelBackground">
                                 <Setter.Value>
                                     <RadialGradientBrush>
                                           <GradientStop Offset="0" Color="#ffcc34"></GradientStop>
                                       <GradientStop Offset="1" Color="#cc9900"></GradientStop>
                                     </RadialGradientBrush>
                                 </Setter.Value>
                             </Setter>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </ResourceDictionary>

在App.xmal文件中添加此资源文件

<ResourceDictionary Source="Sytle.xaml"/>

在界面中使用

<Button Style="{StaticResource RoundedGelButton}" Content="Click Me!"></Button>

WPF自定义圆形按钮样式资源文件