如何创建用户控件User Control

一、UserControl 是什么？

UserControl = 你自己封装的可复用 UI 组件

• 本质是一个内容容器控件
• 可以把一堆控件（Button、TextBox、Grid 等）打包成一个整体
• 像 WinForm 的用户控件、网页的组件一样
• 可以在 Window / Page / 其他 UserControl 里反复使用
• 支持自定义属性、自定义事件、数据绑定

与 Window / Page 的区别

表格

 

类型	是否可独立显示	用途
Window	✅ 可以	主窗口、弹窗
Page	❌ 不可以	导航页面
UserControl	❌ 不可以	复用 UI 组件

 

二、创建 UserControl 的步骤（VS 操作）

1. 右键项目 → 添加 → 用户控件 (WPF)
2. 命名如：MyUserControl.xaml
3. 在 XAML 里写界面
4. 在后台写逻辑、属性、事件
5. 在主窗口或其他地方直接拖放 / 引用使用

三、最简单示例：自定义用户控件

1. 创建用户控件：MyCard.xaml

<UserControl x:Class="WpfUserControlDemo.MyCard"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Background="LightBlue" Margin="10" CornerRadius="8">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock x:Name="txtTitle" FontSize="20" FontWeight="Bold" Text="标题"/>
            <TextBlock x:Name="txtContent" Margin="0 10" Text="内容"/>
        </StackPanel>
    </Grid>
</UserControl>

2. 后台 MyCard.xaml.cs

using System.Windows.Controls;

namespace WpfUserControlDemo
{
    public partial class MyCard : UserControl
    {
        public MyCard()
        {
            InitializeComponent();
        }

        // 普通属性
        public string Title
        {
            get => txtTitle.Text;
            set => txtTitle.Text = value;
        }

        public string Content
        {
            get => txtContent.Text;
            set => txtContent.Text = value;
        }
    }
}

四、在主窗口使用这个用户控件

方法 1：XAML 直接引用

先在 Window 顶部引入命名空间：

xmlns:local="clr-namespace:WpfUserControlDemo"

然后使用：

<Window x:Class="WpfUserControlDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfUserControlDemo">

    <Grid>
        <StackPanel>
            <!-- 直接使用 -->
            <local:MyCard Title="卡片1" Content="这是第一个用户控件"/>
            <local:MyCard Title="卡片2" Content="这是第二个用户控件"/>
        </StackPanel>
    </Grid>
</Window>

方法 2：后台代码创建

var card = new MyCard();
card.Title = "代码创建的卡片";
card.Content = "动态添加";
stackPanel.Children.Add(card);

五、进阶：自定义依赖属性（支持绑定）

普通属性不支持 MVVM 绑定，必须用 依赖属性（DependencyProperty）。

 

示例：给 MyCard 添加可绑定标题

public static readonly DependencyProperty TitleProperty =
    DependencyProperty.Register(
        nameof(Title),
        typeof(string),
        typeof(MyCard),
        new PropertyMetadata("默认标题"));

public string Title
{
    get => (string)GetValue(TitleProperty);
    set => SetValue(TitleProperty, value);
}

然后 XAML 绑定：

<local:MyCard Title="{Binding MyTitle}"/>

六、进阶：自定义事件（向外通知）

用户控件内部按钮点击，要通知父窗口。

1. 定义事件

public event RoutedEventHandler OnCardClick;

private void Button_Click(object sender, RoutedEventArgs e)
{
    OnCardClick?.Invoke(this, e);
}

2. 外部使用

<local:MyCard OnCardClick="MyCard_OnCardClick"/>

七、UserControl 最常用的场景

• 表单条目（用户名输入框、手机号输入）
• 列表项模板（商品卡片、消息卡片）
• 功能模块（搜索栏、顶部导航、底部状态栏）
• 弹窗内部内容
• 复杂 UI 拆分，降低单个窗口代码复杂度

八、核心特点总结

1. UserControl 是组合控件，不是窗口，不能独立运行
2. 封装后可任意地方复用
3. 支持：
   • 普通属性
   • 依赖属性（绑定必备）
   • 自定义事件
   • 命令
   • MVVM 
4. 结构：一个 XAML + 一个后台类
5. 使用方式：直接拖放或用命名空间引用