WPF如何实现自定义按钮Button-创新互联

这篇文章将为大家详细讲解有关WPF如何实现自定义按钮Button，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联是一家集网站建设,大荔企业网站建设,大荔品牌网站建设,网站定制,大荔网站建设报价,网络营销,网络优化,大荔网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

固定样式的按钮

固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。

普通按钮-扁平化风格

先看效果：

WPF如何实现自定义按钮Button

定义Button的样式，详见代码：

<Style x:Key="BtnInfoStyle" TargetType="Button">
   <Setter Property="Width" Value="70"/>
   <Setter Property="Height" Value="25"/>
   <Setter Property="Foreground" Value="White"/>
   <Setter Property="BorderThickness" Value="0"/>
   <Setter Property="Background" Value="#43a9c7"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
       <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="border" Property="Background" Value="#2f96b4"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="True">
        <Setter TargetName="border" Property="Background" Value="#2a89a4"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
</Style>

引用方法：

<Grid Background="White">
  <StackPanel Orientation="Horizontal" Margin="10" VerticalAlignment="Top">
   <Button Style="{StaticResource BtnInfoStyle}" Content="信息" Margin="5 0"/>
</Grid>

上述代码实现了Button按钮的扁平化样式，如果你想调整颜色风格，通过修改Background的值可实现默认颜色，鼠标经过颜色以及鼠标按下颜色。

图标按钮

先看效果：

WPF如何实现自定义按钮Button

Button样式的代码和扁平化Button差不多，只是把TextBlock控件替换成了Image控件，另外需要设置Button默认的背景色为透明。废话不多说看代码：

<Style x:Key="BtnImageStyle1" TargetType="Button">
   <Setter Property="Cursor" Value="Hand"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
       <Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Images/button1.png" Stretch="None"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="True">
        <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>

这里的button1.png需要自己准备图片资源，IsMouseOver和IsPressed的图片资源可自己替换，替换之后能有更丰富的效果呈现。

图标文字混合按钮

效果：

WPF如何实现自定义按钮Button

实现代码：

<Style x:Key="BtnImgTxtStyle1" TargetType="Button">
  <Setter Property="Foreground" Value="#555"/>
  <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border>
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Image Source="Images/adshut.png" Stretch="None"/>
        <TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </StackPanel>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Foreground" Value="#333333" TargetName="Txt"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>

文字按钮和2.3中的图标文字按钮样式差不多，只需要把Image控件去掉就行。

复用性高的按钮

要想实现复用性高的按钮，就必须新建自定义控件。下面这个实例通过自定义控件实现上述所有效果，并且可以随意更改风格。

首先在项目中右键-添加-新建项-自定义控件。

WPF如何实现自定义按钮Button

新建自定义控件之后，添加依赖属性。代码如下：

public class ButtonEx : Button
 {
  static ButtonEx()
  {
   DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonEx), new FrameworkPropertyMetadata(typeof(ButtonEx)));
  }


  public ButtonType ButtonType
  {
   get { return (ButtonType)GetValue(ButtonTypeProperty); }
   set { SetValue(ButtonTypeProperty, value); }
  }

  public static readonly DependencyProperty ButtonTypeProperty =
   DependencyProperty.Register("ButtonType", typeof(ButtonType), typeof(ButtonEx), new PropertyMetadata(ButtonType.Normal));


  public ImageSource Icon
  {
   get { return (ImageSource)GetValue(IconProperty); }
   set { SetValue(IconProperty, value); }
  }

  public static readonly DependencyProperty IconProperty =
   DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ButtonEx), new PropertyMetadata(null));


  public CornerRadius CornerRadius
  {
   get { return (CornerRadius)GetValue(CornerRadiusProperty); }
   set { SetValue(CornerRadiusProperty, value); }
  }

  public static readonly DependencyProperty CornerRadiusProperty =
   DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ButtonEx), new PropertyMetadata(new CornerRadius(0)));


  public Brush MouseOverForeground
  {
   get { return (Brush)GetValue(MouseOverForegroundProperty); }
   set { SetValue(MouseOverForegroundProperty, value); }
  }

  public static readonly DependencyProperty MouseOverForegroundProperty =
   DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());


  public Brush MousePressedForeground
  {
   get { return (Brush)GetValue(MousePressedForegroundProperty); }
   set { SetValue(MousePressedForegroundProperty, value); }
  }

  public static readonly DependencyProperty MousePressedForegroundProperty =
   DependencyProperty.Register("MousePressedForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());


  public Brush MouseOverBorderbrush
  {
   get { return (Brush)GetValue(MouseOverBorderbrushProperty); }
   set { SetValue(MouseOverBorderbrushProperty, value); }
  }

  public static readonly DependencyProperty MouseOverBorderbrushProperty =
   DependencyProperty.Register("MouseOverBorderbrush", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());


  public Brush MouseOverBackground
  {
   get { return (Brush)GetValue(MouseOverBackgroundProperty); }
   set { SetValue(MouseOverBackgroundProperty, value); }
  }

  public static readonly DependencyProperty MouseOverBackgroundProperty =
   DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());


  public Brush MousePressedBackground
  {
   get { return (Brush)GetValue(MousePressedBackgroundProperty); }
   set { SetValue(MousePressedBackgroundProperty, value); }
  }

  public static readonly DependencyProperty MousePressedBackgroundProperty =
   DependencyProperty.Register("MousePressedBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
 }

 public enum ButtonType
 {
  Normal,
  Icon,
  Text,
  IconText
 }

为不同类型按钮设置样式，代码如下：

<Style TargetType="{x:Type local:ButtonEx}">
  <Style.Triggers>
   <Trigger Property="ButtonType" Value="Normal">
    <Setter Property="Background" Value="#43a9c7"/>
    <Setter Property="MouseOverBackground" Value="#2f96b4"/>
    <Setter Property="MousePressedBackground" Value="#2a89a4"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="MouseOverForeground" Value="White"/>
    <Setter Property="MousePressedForeground" Value="White"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <Border x:Name="border" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True">
        <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter TargetName="border" Property="Background" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource TemplatedParent}}"/>
         <Setter TargetName="txt" Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}"/>
         <Setter TargetName="border" Property="BorderBrush" Value="{Binding MouseOverBorderbrush,RelativeSource={RelativeSource TemplatedParent}}"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter TargetName="border" Property="Background" Value="{Binding MousePressedBackground,RelativeSource={RelativeSource TemplatedParent}}"/>
         <Setter TargetName="txt" Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}"/>
         
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
   <Trigger Property="ButtonType" Value="Icon">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
        <Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{TemplateBinding Icon}" Stretch="None"/>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Opacity" Value="0.8"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter Property="Opacity" Value="0.9"/>
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
   <Trigger Property="ButtonType" Value="Text">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Foreground" Value="#002c99"/>
    <Setter Property="MouseOverForeground" Value="#FF2c99"/>
    <Setter Property="MousePressedForeground" Value="#002c99"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/>
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
   <Trigger Property="ButtonType" Value="IconText">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Foreground" Value="#555"/>
    <Setter Property="MouseOverForeground" Value="#555"/>
    <Setter Property="MousePressedForeground" Value="#555"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <Border>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
         <Image Source="{TemplateBinding Icon}" Stretch="None"/>
         <TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </StackPanel>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/>
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
  </Style.Triggers> 
 </Style>

然后就可以引用该控件了：

<Grid>
  <WrapPanel>
   <local:ButtonEx Content="信息" Width="75" Height="25" Margin="10" ButtonType="Normal"/>
   <local:ButtonEx Icon="/Images/button1.png" Margin="10" ButtonType="Icon"/>
   <local:ButtonEx Content="文字按钮" Margin="10" ButtonType="Text"/>
   <local:ButtonEx Content="图文按钮" Icon="/Images/adshut.png" Margin="10" ButtonType="IconText"/>
  </WrapPanel>
 </Grid>

效果如下：

WPF如何实现自定义按钮Button

至此已经完成Button控件的扩展功能，如果想要添加动画或者设置图标的位置和边距等，可以自己另外添加依赖属性来扩展。

关于“WPF如何实现自定义按钮Button”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：WPF如何实现自定义按钮Button-创新互联
本文地址：https://www.cdcxhl.com/article40/cegieo.html

成都网站建设公司_创新互联，为您提供营销型网站建设、网站导航、用户体验、建站公司、响应式网站、企业网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信小程序开发

动态网站知识

同城分类信息