WPF 控件设计艺术[按钮篇三]

三、按钮篇（三）纯图标按钮-IconOnlyButton

同样的，我们找到我们需要设计的按钮样式，如下图左上角的按钮哦
来分析一下吧，我们通过使用WindowsSettings中的这个面板的按钮，可以分析出如下特点：
- 按钮内容为图标，以及通过自定义控件实现
- 默认情况下，背景色为白色（无背景）
- 鼠标放上去，会有一个背景色
- 鼠标按下，背景变为蓝白色

由于该按钮添加了一个图标，该属性我们想通过依赖属性来定义，这样我们就可以再XAML或者其他地方进行设置了。所以我们首先在项目中添加如下的IconButton类

文件路径：Deamon.UiCore.Controls.IconButton.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Deamon.UiCore.Controls
{
    /// 
    /// 图标按钮
    /// 
    public class IconButton : Button
    {
        public IconButton()
        {
            //((StreamGeometry)IconData).FillRule = FillRule.EvenOdd;
        }
        /// 
        /// 图标数据
        /// 
        public Geometry IconData
        {
            get { return (Geometry)GetValue(IconDataProperty); }
            set { SetValue(IconDataProperty, value); }
        }

        /// 
        /// 
        /// 
        public static readonly DependencyProperty IconDataProperty =
            DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconButton), new PropertyMetadata(default(Geometry), (s, e) => { }));

    }
}

注意：这个类的创建方式也可以直接使用自定义控件的创建方式进行创建，这里不做演示。但是就这样直接定义类也是可以的，只是在XAML中直接使用IconButton时是没有任何内容呈现。

接下来，打开VS，添加一个按钮，并编辑模板（和之前的方式一样哦，这里就不再赘述）值得注意的是，我是直接定义到资源自定文件中的，如下图所示：

添加上我们自定义的颜色资源。修改后如下：（不完整截取代码）

注意：首先是local的定义只想我们刚刚定义的IconButton类的命名空间哦。其次我们IconOnlyButton只想的目标类型TargetType是我们定义的IconButton类哦，使用方式如上就好controls:IconButton

然后呢，我们开始我们的模板和触发器的样式设计哦，下面就贴上完整的样式代码哦。

文件路径：UiCore.Styles.IconOnlyButton.xaml

最后，我们开始使用吧，首先将资源文件IconOnlyButton.xaml添加到资源中，然后再使用。

在App.xaml文件中定义

然后再窗口总使用需要定义controls的命名空间，最后再使用

这里的IconData是使用自定义的图形来进行填充的，这个内容可以很多种哦，大家可以试着去下载SVG格式的矢量图，然后使用其中的内容。因为他们都是基于图形微语言实现的。

完结，show for you

积跬步以至千里:) (:一阵没来由的风
哔哩哔哩同步视频或者搜索用户：一阵没来由的风

WPF 控件设计艺术[按钮篇三]

.Net相关栏目本月热门文章