Now let us customize our control to have two properties exposed which, when filled, will show in the UI. To do this, open the MyCustomControl.cs file and create two dependency properties named FirstName and LastName. As every custom control derives from a Control having base class as DependencyObject, you can create dependency properties in it.

Here's the implementation of our class:

namespace Demo.UWP.CustomControls.Library 
{ 
  public sealed class MyCustomControl : Control 
  { 
    public static readonly DependencyProperty FirstNameProperty = 
      DependencyProperty.Register("FirstName", typeof(string), 
      typeof(MyCustomControl), new PropertyMetadata(string.Empty)); 
 
    public static readonly DependencyProperty LastNameProperty = 
      DependencyProperty.Register("LastName", typeof(string), 
      typeof(MyCustomControl), new PropertyMetadata(string.Empty)); 
 
    public string FirstName 
    { 
      get { return (string)GetValue(FirstNameProperty); } 
      set { SetValue(FirstNameProperty, value); } 
    } 
 
    public string LastName 
    { 
      get { return (string)GetValue(LastNameProperty); } 
      set { SetValue(LastNameProperty, value); } 
    } 
    public MyCustomControl() 
    { 
      this.DefaultStyleKey = typeof(MyCustomControl); 
    } 
  } 
} 

As we have the dependency properties created, we can access them in the control's template present in the Generic.xaml file. Let's alter the template to have a StackPanel with two TextBlocks stacked in a horizontal orientation. Create the template binding to have the Text property of the TextBlock controls associated with the newly created properties. Here's the XAML template for your reference:

<Style TargetType="local:MyCustomControl" > 
   <Setter Property="Template"> 
       <Setter.Value> 
           <ControlTemplate TargetType="local:MyCustomControl"> 
               <Border 
                   Background="{TemplateBinding Background}" 
                   BorderBrush="{TemplateBinding BorderBrush}" 
                   BorderThickness="{TemplateBinding BorderThickness}"> 
                   <StackPanel Orientation="Horizontal"> 
                       <TextBlock Text="{TemplateBinding FirstName}" 
                          Margin="8 8 2 8"/> 
                       <TextBlock Text="{TemplateBinding LastName}" 
                          Margin="2 8 8 8"/> 
                   </StackPanel> 
               </Border> 
           </ControlTemplate> 
       </Setter.Value> 
   </Setter> 
</Style> 

Now in the main page, we need to set the values to the exposed properties of our custom control. Assign the values to FirstName and LastName:

<Page 
    x:Class="Demo.UWP.CustomControls.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="using:Demo.UWP.CustomControls.Library"> 
 
    <Grid> 
        <controls:MyCustomControl Width="400" Height="35" 
           Background="Orange" 
           Margin="20" 
           FirstName="Kunal" 
           LastName="Chowdhury"/> 
    </Grid> 
</Page> 

Compile the code and run it. You will see the control updated with the first name and last name populated in the UI, which we passed from our main page to the control. The UI will look like this: