做界面，要想快，就得学会封装控件，对于一些比较常用的控件，封装成公用的控件，可以提升开发效率。在开发前，可以先看下设计稿，对于一些常用的样式，可以封装成一个控件，比如说我们经常会碰到一种这样的样式，左边显示标题，右边显示内容，一般需要两个TextBlock，为了便于以后修改样式，可以封装在一个UserControl中。下面就来看一下在WPF中怎么封装控件的，以及封装时需要注意什么。

1.新建UserControl

首先需要新建一个UserControl，如下所示：

新建UserControl.png
创建好控件后，就往控件中添加一些小组件了，这里就直接添加一个TextBlock，可以在引用控件的时候，传递Titles到组件中的TextBlock进行显示，如下所示：

<UserControl x:Class="WpfApp1.UserControl2"
             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:WpfApp1"
             DataContext="{Binding RelativeSource={RelativeSource Self}}"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock x:Name="title" Text="{Binding Titles , Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBlock>
    </Grid>
</UserControl>

• 坑
  DataContext="{Binding RelativeSource={RelativeSource Self}}"这一行一定不能少，否则传递的值无法显示，折腾了我好久。。。

2.设置属性

创建好控件好，就需要设置属性了，主要是通过DependencyProperty 来设置，设置自定义属性的代码如下所示：

public partial class UserControl2 : UserControl
    {
        [BindableAttribute(true)]
        public string Titles
        {
            get { return (string)GetValue(TitlesProperty); }
            set { SetValue(TitlesProperty, value); }
        }

        public UserControl2()
        {
            InitializeComponent();
        }

        public static string GetTitles(DependencyObject obj)
        {
            return (string)obj.GetValue(TitlesProperty);
        }

        public static void SetTitles(DependencyObject obj, string value)
        {
            obj.SetValue(TitlesProperty, value);
        }

        public static readonly DependencyProperty TitlesProperty =
            DependencyProperty.Register("Titles", typeof(string), typeof(UserControl2), new PropertyMetadata("hhhhhh"));
    }

3.使用组件

添加好控件及设置好属性后，就可以使用组件了，使用组件比较简单，直接拖进来或者写代码都行，如下所示：

<local:UserControl2 HorizontalAlignment="Left" Height="100" Margin="430,284,0,0" VerticalAlignment="Top" Width="100" Titles="这是自定义的组件"/>

自定义组件.png
UserControl2为创建的组件类。
Titles="这是自定义的组件"为自定义属性传值。
好了，一个简单的组件就这么完成了。
个人博客