有时候需要按照需求创建自定义的控件，避免重复编码，下面演示如何添加UserConrol，如果在项目中引用创建好的UserControl。
1. 创建一个项目，右键添加UserControl(WPF)
给用户控件重命名，本例中重命名为“MyTimePicker”
该控件的主要功能，实现小时，分钟的增减调节功能。
完整界面XMAL代码如下：
<UserControl x:Class="WpfApp.MyUserControls.MyTimePicker"
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:WpfApp.MyUserControls"
mc:Ignorable="d"
Background="White"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.Resources>
<Style TargetType="RepeatButton">
<Setter Property="Margin" Value="5"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RepeatButton x:Name="btnIncreaseHour"
Content="+"
FontSize="24"
Click="btnIncreaseHour_Click" Interval="100"></RepeatButton>
<RepeatButton x:Name="btnDecreaseHour" Content="-"
FontSize="24"
Grid.Row="1"
Click="btnDecreaseHour_Click"
Interval="100"></RepeatButton>
<RepeatButton x:Name="IncreaseMins"
Content="+"
FontSize="24"
Grid.Column="2"
Click="IncreaseMins_Click"
Interval="100"></RepeatButton>
<RepeatButton x:Name="DecreaseMins"
Content="-"
FontSize="24"
Grid.Column="2"
Grid.Row="1"
Click="DecreaseMins_Click"
Interval=" 100"></RepeatButton>
<TextBox x:Name="txtTimePicker"
FontSize="24"
FontWeight="DemiBold"
Foreground="Blue"
Grid.Column="1"
Grid.RowSpan="2"
VerticalAlignment="Center"
TextAlignment="Center"/>
</Grid>
</UserControl>
后台代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApp.MyUserControls
{
/// <summary>
/// MyTimePicker.xaml 的交互逻辑
/// </summary>
public partial class MyTimePicker : UserControl
{
public MyTimePicker()
{
InitializeComponent();
txtTimePicker.Text = $"{hour:00}:{min:00}";
}
int hour = DateTime.Now.Hour;
int min = DateTime.Now.Minute;
private void btnIncreaseHour_Click(object sender, RoutedEventArgs e)
{
hour++;
if(hour==24)
{
hour = 0;
}
txtTimePicker.Text = $"{hour:00}:{min:00}";
}
private void btnDecreaseHour_Click(object sender, RoutedEventArgs e)
{
hour--;
if (hour == -1)
{
hour = 23;
}
txtTimePicker.Text = $"{hour:00}:{min:00}";
}
private void IncreaseMins_Click(object sender, RoutedEventArgs e)
{
min++;
if(min==60)
{
min = 0;
}
txtTimePicker.Text = $"{hour:00}:{min:00}";
}
private void DecreaseMins_Click(object sender, RoutedEventArgs e)
{
min--;
if (min == -1)
{
min = 59;
}
txtTimePicker.Text = $"{hour:00}:{min:00}";
}
}
}
2. 编译后，项目添加该控件
编译后在工具箱存在该控件，可以自由添加该控件，和Visual Studio常用控件一样添加。
使用代码布局添加，和使用鼠标拖放一样简单。
XAML代码如下：
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp"
mc:Ignorable="d"
xmlns:UC="clr-namespace:WpfApp.MyUserControls"
Title="User Control" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Margin="5" Background="LightSkyBlue">
<TextBlock FontSize="20" HorizontalAlignment="Center">用户自定义控件</TextBlock>
<TextBlock>演示创建自定义控件</TextBlock>
<TextBlock>演示如何使用自定义控件</TextBlock>
</StackPanel>
<UC:MyTimePicker Grid.Row="0" Grid.Column="1" Margin="5"></UC:MyTimePicker>
<UC:MyTimePicker Grid.Column="1" HorizontalAlignment="Left" Margin="39,0,0,0" Grid.Row="1" VerticalAlignment="Center"/>
<UC:MyTimePicker Grid.Column="1" HorizontalAlignment="Left" Margin="230,0,0,0" Grid.Row="1" VerticalAlignment="Center"/>
</Grid>
</Window>
效果如下：
可以单独对每个控件操作。
