- A+
概述
本文描述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 <Style TargetType="{x:Type local:ImageButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:ImageButton}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
首先我们需要把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属性可以使用。
下面我们完善一下这个控件模板的描述。
<Style TargetType="{x:Type local:ImageButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:ImageButton}"> <Border Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="1"> <StackPanel Orientation="Horizontal"> <Image Source="{TemplateBinding Image}"/> <Label Content="{TemplateBinding Content}" VerticalAlignment="Center"/> </StackPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
这样一个自定义控件就做好了。
和控件模板一样，我们还是可以通过Trigger控制控件的一些动态效果：
<Style TargetType="{x:Type local:ImageButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:ImageButton}"> <Border x:Name="border"> ... </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="border" Property="Background" Value="LightBlue" /> <Setter TargetName="border" Property="BorderBrush" Value="Gray" /> <Setter TargetName="image" Property="Margin" Value="2" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="border" Property="Background" Value="LightGray" /> <Setter TargetName="image" Property="Opacity" Value="0.2" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
用户控件
用户控件比较简单，就是通过一些现有控件的组合，形成一个可以通用的控件。例如：通过组合一个加号的图片、一个减号的图片、一个文本框，我们可以组合一个NumericUpDown控件。
<UserControl x:Class="LearnWPF.Controls.NumericUpDown"> <Border BorderThickness="1" BorderBrush="LightGray" > <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="30"/> <ColumnDefinition Width="50"/> <ColumnDefinition Width="30"/> </Grid.ColumnDefinitions> <Border Grid.Column="0" > <Image Source="Images/Subtract.png" Margin="4" MouseDown="ButtonSubtract_Click"> </Image> </Border> <TextBox x:Name="txtValue" Text="1.220" TextChanged="txtValue_TextChanged"/> <Border Grid.Column="2"> <Image Source="Images/Add.png" Margin="4" MouseDown="ButtonAdd_Click"> </Image> </Border> </Grid> </Border> </UserControl>
我们可以给控件增加一个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模式
<xyc:NumericUpDown Value="{Binding Hour,Mode=TwoWay}" Minimum="0" Maximum="23"/>
由于 Minimum和Maximum不是依赖属性，只能直接幅值，不能绑定。
自绘的用户控件
有时候我们需要做一些很奇怪的控件，如下：
这个也是通过用户控件实现。我的经验是：在用户控件里放一个Image控件，缩放模式设置为Fill，然后在后台画个图并复值给Image控件即可。
在绘图时，由于用户会调整控件尺寸，所以绘图控件的定位是比较麻烦的，我们可以画一个指定尺寸的图，然后让Image来处理缩放，这就比较简单了。
设计代码：
<UserControl x:Class="LearnWPF.Controls.Clock" <Grid>
<Image x:Name="imageBitmap" Stretch="Fill" /> </Grid> </UserControl>
后台代码：
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】前言与目录
