User Control

Creating Custom UserControl with Custom Properties 

This article discusses on how to create a custom User Control in XAML and WPF with custom properties.
Prior to creation, you must have a basic idea on What is User Control?


Brief On User Control

A User Control is a composite collection of custom controls which are predefined in WPF like TextBox, Button, Label etc. which consists of a XAML file and code behind file.

 Creating a User Control

Open Visual Studio 2008 , Choose File --> New --> Project, select WPF Application  and name your project as CustomUserControl.
In the Solution Explorer, right click on the project and Choose Add --> User Control, name the user control as “MyUserControl.xaml” and click on Add which opens a new tab with the following code

<UserControl x:Class="CustomUserControl.MyUserControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Height="300" Width="300">

    <Grid>

           

    </Grid>

</UserControl>

Add following namespace in the UserControl tag to have design width and design height which helps our user control width and height to be relative to the parent control.

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignWidth="300" d:DesignHeight="300"

Drag TextBox, TextBlock and Button from the toolbox to the workspace and align them .

In the code behind file of MyUserControl.xaml  i.e in the MyUserControl.xaml .cs file add the following code to register our custom properties to the defined User Control.

//Registering DependencyProperty for the TextBlock of the User Control

        public static DependencyProperty TextBlockTextProperty =

            DependencyProperty.Register

            ("TextBlockText", typeof(string), typeof(MyUserControl));

       

       //Creating the property for the text of TextBlock

        public string TextBlockText

        {

            get

            {

                return GetValue(TextBlockTextProperty) as string;

            }

            set

            {

                SetValue(TextBlockTextProperty, value);

            }

        }

        //Registering DependencyProperty for the TextBox of the User Control

        public static DependencyProperty TextBoxTextProperty =

            DependencyProperty.Register

            ("TextBoxText", typeof(string), typeof(MyUserControl));

       

        //Creating the property for the text of TextBox

        public string TextBoxText

        {

            get

            {

                return GetValue(TextBlockTextProperty) as string;

            }

            set

            {

                SetValue(TextBlockTextProperty, value);

            }

        }

Binding Properties to the User Control

Name MyUserControl.xaml file as “ MyUCName” and bind our custom created properties to the Text Property of TextBlock and TextBox which is as follows:

<UserControl x:Class="CustomUserControl.MyUserControl"

    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"

    mc:Ignorable="d"

    d:DesignWidth="300" d:DesignHeight="300"

    x:Name="MyUCName"

    >

    <Grid Height="136">

        <TextBlock 

          Text="{Binding Path=TextBlockText, ElementName=MyUCName}" 

          Height="21" 

          Margin="0,10,0,0" 

          Name="textBlock1" VerticalAlignment="Top" />

        <Button 

            Height="23" 

            Content="Button" 

            Margin="34,0,38,15" 

            Name="button1" VerticalAlignment="Bottom"/>

        <TextBox 

            Text="{Binding Path=TextBoxText, ElementName=MyUCName}" 

            Margin="0,41,0,0" Name="textBox1" 

            Height="23" VerticalAlignment="Top" />

    </Grid>

</UserControl>

Using the Custom User Control

In the Window1.xaml add the following namespace to include our User Control.

xmlns:vw="clr-namespace:CustomUserControl" 

Now call our user control and use our custom created properties.

Our Window1.xaml file looks as follows

<Window x:Class="CustomUserControl.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300"

    xmlns:vw="clr-namespace:CustomUserControl" >

    <Grid>

<vw:MyUserControl x:Name="customUC"

   TextBlockText="I'm the property of UserControl"

   TextBoxText="{Binding   Path=TextBlockText,ElementName=customUC}"/>

    </Grid>

</Window>

This example helps you to create the custom user control with custom properties with no pain.