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属性可以使用。
下面我们完善一下这个控件模板的描述。
这样一个自定义控件就做好了。
https://img2022.cnblogs.com/blog/18393/202208/18393-20220822162806042-1231286081.png
和控件模板一样，我们还是可以通过Trigger控制控件的一些动态效果：
用户控件
用户控件比较简单，就是通过一些现有控件的组合，形成一个可以通用的控件。例如：通过组合一个加号的图片、一个减号的图片、一个文本框，我们可以组合一个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模式
由于 Minimum和Maximum不是依赖属性，只能直接幅值，不能绑定。
自绘的用户控件
有时候我们需要做一些很奇怪的控件，如下：
https://img2022.cnblogs.com/blog/18393/202208/18393-20220822165438869-2061461372.png
这个也是通过用户控件实现。我的经验是：在用户控件里放一个Image控件，缩放模式设置为Fill，然后在后台画个图并复值给Image控件即可。
在绘图时，由于用户会调整控件尺寸，所以绘图控件的定位是比较麻烦的，我们可以画一个指定尺寸的图，然后让Image来处理缩放，这就比较简单了。
设计代码：
页:
[1]