C# WPF 自定义按钮的方法_C#

C# WPF 自定义按钮的方法

2022-11-04 11:48louzi C#

这篇文章主要介绍了C# WPF 自定义按钮的方法，帮助大家更好的理解和学习使用c#，感兴趣的朋友可以了解下

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

实现效果

使用图片做按钮背景；
自定义鼠标进入时效果；
自定义按压效果；
自定义禁用效果

实现效果如下图所示：

C# WPF 自定义按钮的方法

实现步骤

创建CustomButton.cs，继承自Button；
创建一个资源文件ButtonStyles.xaml；
在资源文件中设计按钮的Style；
在CustomButton.cs中添加Style中需要的依赖属性；
在程序中添加资源并引用（为了方便在不同的程序中引用自定义按钮，自定义按钮放在独立的类库中，应用程序中进行资源合并即可）。

示例代码

				?

									// 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>