当前位置：移动技术网 > IT编程>开发语言>c# > WPF自定义控件和样式之自定义按钮（Button）

WPF自定义控件和样式之自定义按钮（Button）

2019年07月18日 | 移动技术网IT编程 | 我要评论

一、前言

程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了，来一起看看详细的介绍吧。

二、固定样式的按钮

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

2.1 普通按钮-扁平化风格

先看效果：

定义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的值可实现默认颜色，鼠标经过颜色以及鼠标按下颜色。

2.2 图标按钮

先看效果：

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的图片资源可自己替换，替换之后能有更丰富的效果呈现。

2.3 图标文字混合按钮

效果：

实现代码：

<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.4 文字按钮和2.3中的图标文字按钮样式差不多，只需要把image控件去掉就行。

三、复用性高的按钮

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

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

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

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>

效果如下：

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

C#实现猜数字游戏

本文实例为大家分享了c#实现猜数字游戏具体代码，供大家参考，具体内容如下给定一个0-100的随机数字猜其大小题目样式：电脑产生一个0到100之间的随机数字，并且... [阅读全文]
使用Visual Studio2019创建C#项目(窗体应用程序、控制台应用程序、Web应用程序)

一、vs的开发环境首先你得安装了vs2019，然后确认下下面三个组件是否存在，如果没有要下载一下。vs2019的安装可参考。二、创建c#窗体应用程序打开vs可以... [阅读全文]
C# 可空类型的具体使用

在项目中我们经常会遇到可为空类型，那么到底什么是可为空类型呢？下面我们将从4个方面为大家剖析。1、可空类型基础知识顾名思义，可空类型指的就是某个对象类型可以为空... [阅读全文]
C#存储相同键多个值的Dictionary实例详解

涉及到两个问题：一、访问磁盘中文件夹、文件夹下面的文件夹先看一下磁盘文件夹结构c盘下面有个根文件夹savefile，savefile下面有两个子文件夹分别为，2... [阅读全文]
vs2019安装和使用详细图文教程

vs2019已经在4月2日正式发布，vs2019发布会请看这个链接：vs2019发布活动vs2019和vs2017一样强大，项目兼容，不用互相删除，而且c/c+... [阅读全文]
C#实现猜数字小游戏

本文实例为大家分享了c#实现猜数字小游戏的具体代码，供大家参考，具体内容如下效果如图：代码：using system;using system.collecti... [阅读全文]
Visual Studio 中自定义代码片段的方法

第一步、打开 visual studio code，按ctrl + shift + p，输入：configure user snippets，选择 prefer... [阅读全文]
C#实现简单俄罗斯方块

最近在看《.net游戏编程入门经典 c#篇》第一章介绍了如何制作俄罗斯方块，自己试了试按照书上的步骤，可算是完成了。于是写下这篇文章留作纪念。1.类的设计在充... [阅读全文]
C#实现获取本地内网(局域网)和外网(公网)IP地址的方法分析

本文实例讲述了c#实现获取本地内网(局域网)和外网(公网)ip地址的方法。分享给大家供大家参考，具体如下：1、获取本机的ip地址集合：/// <summa... [阅读全文]
asp.net实现遍历Request的信息操作示例

本文实例讲述了asp.net实现遍历request的信息操作。分享给大家供大家参考，具体如下：#需求：在服务端获取从客户端发送过来的所有数据信息；#方案：1、服... [阅读全文]

网友评论


验证码：

WPF自定义控件和样式之自定义按钮（Button）

2019年07月18日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论