C# WPF 自定义按钮的方法

本文介绍WPF一种自定义按钮的方法。

实现效果

1. 使用图片做按钮背景；

2. 自定义鼠标进入时效果；

3. 自定义按压效果；

4. 自定义禁用效果
   

实现效果如下图所示：

实现步骤

1. 创建CustomButton.cs，继承自Button；

2. 创建一个资源文件ButtonStyles.xaml；

3. 在资源文件中设计按钮的Style；

4. 在CustomButton.cs中添加Style中需要的依赖属性；

5. 在程序中添加资源并引用（为了方便在不同的程序中引用自定义按钮，自定义按钮放在独立的类库中，应用程序中进行资源合并即可）。
   

示例代码

// ButtonStyles.xaml
<Style x:Key="CustomButton" TargetType="{x:Type local:CustomButton}">
 <Setter Property="Template">
   <Setter.Value>
     <ControlTemplate TargetType="{x:Type local:CustomButton}">
       <Grid x:Name="container">
         <Image Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
             Source="{Binding ButtonImage,RelativeSource={RelativeSource Mode=TemplatedParent}}">
           <Image.RenderTransformOrigin>
             <Point X="0.5" Y="0.5"/>
           </Image.RenderTransformOrigin>
           <Image.RenderTransform>
             <ScaleTransform x:Name="scaletrans" ScaleX="1" ScaleY="1"/>
           </Image.RenderTransform>
         </Image>
       </Grid>
       <ControlTemplate.Triggers>
         <Trigger Property="IsEnabled" Value="False">
           <Setter Property="Opacity" Value="0.5" TargetName="container"/>
         </Trigger>
         <Trigger Property="IsMouseOver" Value="True">
           <Setter Property="Background" Value="#2c000000" TargetName="container"/>
         </Trigger>
         <Trigger Property="IsPressed" Value="True">
           <Trigger.EnterActions>
             <BeginStoryboard>
               <Storyboard>
                 <DoubleAnimation Storyboard.TargetName="scaletrans" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                 To="0.8" Duration="0:0:0.15" AutoReverse="True"/>
                 <DoubleAnimation Storyboard.TargetName="scaletrans" Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                 To="0.8" Duration="0:0:0.15" AutoReverse="True"/>
               </Storyboard>
             </BeginStoryboard>
           </Trigger.EnterActions>
         </Trigger>
       </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
 </Setter>
</Style>

// CustomButton.cs
public class CustomButton : Button
{
 public ImageSource ButtonImage
 {
   get { return (ImageSource)GetValue(ButtonImageProperty); }
   set { SetValue(ButtonImageProperty, value); }
 }

public static readonly DependencyProperty ButtonImageProperty =
   DependencyProperty.Register("ButtonImage", typeof(ImageSource), typeof(CustomButton),
   new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
}

// App.xaml 合并资源
<Application.Resources>
 <ResourceDictionary>
   <ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source=".../ButtonStyles.xaml"/>
   </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>  
</Application.Resources>

// view.xaml 使用
<Grid>
 <customcontrols:CustomButton Width="48" Height="48"
   Style="{StaticResource CustomButton}" ButtonImage="/Louzi.Paint;component/Images/Toolbar/write.png"/>
</Grid>

来源：https://www.cnblogs.com/louzixl/p/14454750.html