WPF 如何自定义图标——应用篇——自定义控件

WPF 如何自定义图标——应用篇——自定义控件

引言

结合前面我们已经能够较为灵活的在CS和XAML中使用我们自定义的图标。接下来，我们结合一些框架元素（FrameElement）的特点实现我们自己自定义控件的定义与使用。自定义控件的特点：灵活，重构能力强。

图标类控件给人非常醒目的感觉，我们通过自定义Control、Button和CheckBox控件来实现自定义控件的定义与使用。

编码环境：Win10 Visual Studio 2019 .NET Framework 4.7.2 / .NET Core 3.1

应用

1.IconControl的定义与使用

IconControl是一个用于呈现IconData的图标控件，只用于图标呈现，别无他用。

（1）新建–自定义控件–命名为“IconControl”，此时系统会为我们自动生成一个Theme文件夹以及Generic.xaml文件和在新建的路径下生成IconControl.cs文件。

（2）打开IconControl.cs，将内容替换为下面的代码：

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

namespace Deamon.UiCore
{
    /// <summary>
    /// 按照步骤 1a 或 1b 操作，然后执行步骤 2 以在 XAML 文件中使用此自定义控件。
    ///
    /// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。
    /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
    /// 元素中:
    ///
    ///     xmlns:MyNamespace="clr-namespace:Deamon.UiCore"
    ///
    ///
    /// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。
    /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
    /// 元素中:
    ///
    ///     xmlns:MyNamespace="clr-namespace:Deamon.UiCore;assembly=Deamon.UiCore"
    ///
    /// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用，
    /// 并重新生成以避免编译错误:
    ///
    ///     在解决方案资源管理器中右击目标项目，然后依次单击
    ///     “添加引用”->“项目”->[浏览查找并选择此项目]
    ///
    ///
    /// 步骤 2)
    /// 继续操作并在 XAML 文件中使用控件。
    ///
    ///     <MyNamespace:IconControl/>
    ///
    /// </summary>
    public class IconControl : Control
    {
        public IconControl()
        {
            DefaultStyleKey = typeof(IconControl);
        }

        public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconControl));

        public Geometry IconData
        {
            get => (Geometry)GetValue(IconDataProperty);
            set => SetValue(IconDataProperty, value);
        }

    }
}

上面注释中也简单的介绍了如何使用自定义控件。

（3）打开Generic.xaml，将IconData属性绑定到控件模板上。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Deamon"
    xmlns:uicore="clr-namespace:Deamon.UiCore"
    >

    <Style TargetType="{x:Type uicore:IconControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type uicore:IconControl}">

                    <ContentControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <Viewbox>
                                <Path Data="{TemplateBinding IconData}" Fill="Black" Stroke="Gray" StrokeThickness="1"/>
                            </Viewbox>
                        </Border>
                    </ContentControl>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

说明：Generic.xaml资源文件定义了该自定义控件的默认样式，如果没有默认样式，系统会出错，也可以自己在其他资源文件定义样