WPF开发快速入门【4】自定义控件与用户控件

概述

本文描述WPF的自定义控件和用户控件。

自定义控件

前面文章介绍了WPF的ControlTemplate，当我们对系统控件自带的样式不太满意时，我们可以通过控件模板自定义用户的样式，以Button为例，我们可以设计一个圆形的按钮，并通过触发器控制一些动态效果。在使用控件模板时，我们通过TemplateBinding来引用控件的一些属性，这个属性的范围仅限于Button本身所拥有的属性。

如果我想设计一款带图片的按钮，通过控件模板就实现不了了，因为这个图片按钮的控件应该具备一个类似Image这样的属性，但Button控件没有这个属性，所以就实现不了我们想要的功能了。

这时候可以使用自定义控件来解决问题。

我们新建一个ImageButton的自定义控件，系统自动生成一个类文件和一个样式文件:

//ImageButton.cs

public class ImageButton : Control

{

static ImageButton()

{

DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));

}

}

//Generic.xaml

首先我们需要把ImageButton 父类修改为Button，表示这个控件功能继承于Button，然后我们为这个类增加一个Image属性

public ImageSource Image

{

get { return (ImageSource)GetValue(ImageProperty); }

set { SetValue(ImageProperty, value); }

}

public static readonly DependencyProperty ImageProperty =

DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));

此时，这个控件的后台代码就完成了。

然后我们再仔细看看Generic.xaml中对于local:ImageButton这个控件的样式描述，这不就是修改它的控件模板吗？不过此时，除了Button的现有属性，我们还多了一个Image属性可以使用。

下面我们完善一下这个控件模板的描述。

这样一个自定义控件就做好了。

和控件模板一样，我们还是可以通过Trigger控制控件的一些动态效果：

用户控件

用户控件比较简单，就是通过一些现有控件的组合，形成一个可以通用的控件。例如：通过组合一个加号的图片、一个减号的图片、一个文本框，我们可以组合一个NumericUpDown控件。

MouseDown="ButtonSubtract_Click">

TextChanged="txtValue_TextChanged"/>

MouseDown="ButtonAdd_Click">

我们可以给控件增加一个Value的属性，然后当用户点击图片按钮时，我们修改Value的值即可。

private void ButtonAdd_Click(object sender, RoutedEventArgs e)

{

Value += Increment;

}

private void ButtonSubtract_Click(object sender, RoutedEventArgs e)

{

Value -= Increment;

}

此时，这个用户控件就开发完成了。但它不支持MVVM模式，因为Value属性不是依赖属性，我们需要把Value属性定义为依赖属性：

public decimal Value

{

get { return (decimal)GetValue(ValueProperty); }

set { SetValue(ValueProperty, value); }

}

public static readonly DependencyProperty ValueProperty =

DependencyProperty.Register("Value", typeof(decimal), typeof(NumericUpDown), new UIPropertyMetadata(new decimal(), ValuePropertyChanged));

private static void ValuePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs arg)

{

NumericUpDown control = obj as NumericUpDown;

decimal Data = (decimal)arg.NewValue;

control.txtValue.Text = Math.Round(Data, control.DecimalPlaces).ToString();

}

此时Value属性就支持MVVM，而且支持双向Binding模式

由于 Minimum和Maximum不是依赖属性，只能直接幅值，不能绑定。

自绘的用户控件

有时候我们需要做一些很奇怪的控件，如下：

这个也是通过用户控件实现。我的经验是：在用户控件里放一个Image控件，缩放模式设置为Fill，然后在后台画个图并复值给Image控件即可。

在绘图时，由于用户会调整控件尺寸，所以绘图控件的定位是比较麻烦的，我们可以画一个指定尺寸的图，然后让Image来处理缩放，这就比较简单了。

设计代码：

后台代码：

public partial class Clock : UserControl

{

public Clock()

{

InitializeComponent();

this.Loaded += Clock_Loaded;

}

private void Clock_Loaded(object sender, RoutedEventArgs e)

{

DrawImage();

}

private void DrawImage()

{

DrawingGroup group = new DrawingGroup();

using (DrawingContext ctx = group.Open())

{

DrawImageByContext(ctx);

}

group.Freeze();

DrawingImage drawimage = new DrawingImage(group);

this.imageBitmap.Source = drawimage;

}

private void DrawImageByContext(DrawingContext ctx)

{

int PicWidth = 500;

int PicHeight = 500;

ctx.DrawRectangle(Brushes.Transparent, null, new Rect(0, 0, PicWidth, PicHeight));

//拿着ctx尽情绘图吧

}

}

资源

系列目录：WPF开发快速入门【0】前言与目录

代码下载：Learn WPF: WPF学习笔记 (gitee.com)