WPF 自定义UserControl

有时候需要按照需求创建自定义的控件，避免重复编码，下面演示如何添加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>

  

效果如下：

可以单独对每个控件操作。