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资源文件定义了该自定义控件的默认样式,如果没有默认样式,系统会出错,也可以自己在其他资源文件定义样式,但是一定要在App.xaml中加载资源以确保程序在使用时存在默认样式。
(4)使用IconControl。IconUsageView.xaml
<UserControl x:Class="Deamon.View.PERSONALIZATION.IconUsage.IconUsageView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Deamon.View.PERSONALIZATION.IconUsage"
xmlns:uicore="clr-namespace:Deamon.UiCore"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<StackPanel>
<uicore:IconControl Width="100" Height="100" IconData="{Binding IconSource.Forward,Source={StaticResource ServiceLocator},UpdateSourceTrigger=PropertyChanged}" />
<uicore:IconControl Width="100" Height="100" IconData="{Binding IconSource.Back,Source={StaticResource ServiceLocator},UpdateSourceTrigger=PropertyChanged}" />
<uicore:IconControl Width="100" Height="100" IconData="{Binding IconSource.DoubleDown,Source={StaticResource ServiceLocator},UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</Grid>
</UserControl>
2.IconButton的定义与使用
IconButton是纯图标按钮。基类是Button。
(1)新建(自定义控件)IconButton.cs
(2)打开IconButton.cs,将内容替换为下面的代码:
public class IconButton : Button
{
static IconButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(IconButton), new FrameworkPropertyMetadata(typeof(IconButton)));
}
public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconButton));
public IconButton() { DefaultStyleKey = typeof(IconButton); }
public Geometry IconData
{
get => (Geometry)GetValue(IconDataProperty);
set => SetValue(IconDataProperty, value);
}
}
(3)打开Generic.xaml,将IconData属性绑定到控件模板上。直接将下面的样式复制到该文件中。
<SolidColorBrush x:Key="Accent" Color="#FF0B7AFF" />
<SolidColorBrush x:Key="ModernButtonText" Color="#333333"/>
<SolidColorBrush x:Key="ModernButtonTextHover" Color="#333333" />
<SolidColorBrush x:Key="ButtonBackgroundHover" Color="#dddddd" />
<SolidColorBrush x:Key="ButtonTextDisabled" Color="#a1a1a1" />
<SolidColorBrush x:Key="ModernButtonTextPressed" Color="#333333" />
<SolidColorBrush x:Key="ModernButtonTextDisabled" Color="#a1a1a1" />
<Style TargetType="uicore:IconButton">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="{DynamicResource ModernButtonText}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="uicore:IconButton">
<Grid x:Name="grid"
Background="{TemplateBinding Background}"
MinHeight="36"
MinWidth="36">
<Path x:Name="icon"
Data="{TemplateBinding IconData}"
Width="15"
Height="15"
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Opacity="0.8">
<Path.LayoutTransform>
<ScaleTransform x:Name="IconScale"/>
</Path.LayoutTransform>
</Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" />
<Setter Property="Opacity" TargetName="icon" Value="1"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="IconScale"
Storyboard.TargetProperty="ScaleX"
To="1.2"
Duration="0:0:0.15" />
<DoubleAnimation Storyboard.TargetName="IconScale"
Storyboard.TargetProperty="ScaleY"
To="1.2"
Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="IconScale"
Storyboard.TargetProperty="ScaleX"
To="1"
Duration="0:0:0.15" />
<DoubleAnimation Storyboard.TargetName="IconScale"
Storyboard.TargetProperty="ScaleY"
To="1"
Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="{DynamicResource Accent}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource ButtonTextDisabled}" />
<Setter TargetName="icon" Property="Opacity" Value="0.3" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
从定义的样式来看,原来用于显示的Content属性没有在模板中体现,因此在使用时即使设置了也没有任何作用。
(4)使用
<UserControl x:Class="Deamon.View.PERSONALIZATION.IconButtonView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Deamon.View.PERSONALIZATION"
xmlns:uicore="clr-namespace:Deamon.UiCore"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<WrapPanel>
<uicore:IconButton IconData="{Binding IconSource.Add,Source={StaticResource ServiceLocator}}"/>
<uicore:IconButton IconData="{Binding IconSource.Video,Source={StaticResource ServiceLocator}}"/>
<uicore:IconButton IconData="{Binding IconSource.NewFile,Source={StaticResource ServiceLocator}}"/>
</WrapPanel>
</Grid>
</UserControl>
纯按钮的图标搞定了。
3.IconCheckBox的定义与使用
IconCheckBox是一个CheckBox,本例中只存在两种状态(选中、未选中)。
(1)新建自定义控件并命名为IconCheckBox.cs。
(2)打开IconCheckBox.cs,将内容替换为下面的代码:
public class IconCheckBox : CheckBox
{
public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconCheckBox));
public IconCheckBox() { DefaultStyleKey = typeof(IconCheckBox); }
public Geometry IconData
{
get => (Geometry)GetValue(IconDataProperty);
set => SetValue(IconDataProperty, value);
}
}
(3)打开Generic.xaml,将IconData属性绑定到控件模板上。直接将下面的样式复制到该文件中。
<Style TargetType="{x:Type uicore:IconCheckBox}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="{DynamicResource ModernButtonText}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type uicore:IconCheckBox}">
<Grid x:Name="grid"
Background="{TemplateBinding Background}"
MinHeight="36"
MinWidth="36">
<Ellipse Width="30"
Height="30"
Name="bg"/>
<Path x:Name="icon"
Data="{TemplateBinding IconData}"
Width="14"
Height="14"
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Opacity="0.7"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" />
<Setter Property="Opacity" TargetName="icon" Value="1"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="icon" Property="Fill" Value="{DynamicResource Accent}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource ModernButtonTextDisabled}" />
<Setter TargetName="icon" Property="Opacity" Value="0.3" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Fill" Value="{DynamicResource Accent}" TargetName="icon"/>
<Setter Property="Stroke" Value="{DynamicResource Accent}" TargetName="bg"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(4)使用
<UserControl x:Class="Deamon.View.PERSONALIZATION.IconCheckBoxView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Deamon.View.PERSONALIZATION"
xmlns:uicore="clr-namespace:Deamon.UiCore"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<StackPanel >
<uicore:IconCheckBox IconData="{Binding Path=IconSource.Camera,Source={StaticResource ServiceLocator}}"/>
<uicore:IconCheckBox IconData="{Binding Path=IconSource.Close,Source={StaticResource ServiceLocator}}"/>
<uicore:IconCheckBox IconData="{Binding Path=IconSource.Speaker,Source={StaticResource ServiceLocator}}"/>
<uicore:IconCheckBox IconData="{Binding Path=IconSource.Mic,Source={StaticResource ServiceLocator}}"/>
<uicore:IconCheckBox IconData="{Binding Path=IconSource.Cursor,Source={StaticResource ServiceLocator}}"/>
</StackPanel>
</Grid>
</UserControl>
总结
OK,到这里就差不多结束了。自定义控件是个非常好的东西,能够设计出很多我们喜欢的控件,同时他对WPF的一些特性支持相比于用户控件要宽得多。