We are am going to create a custom user control with:

  • Text Block
  • Image

You have to follow the steps for the purpose given below :-

Step-1:  New project

Open Visual Studio-> File-> New- > Project ,select universal -> Blank App name it as you want and then press OK

Step-2:  Add user control

Under Solution Explorer -> Created Project(UserCustomControl)-> Add-> New item-> User Control name it as you want and press Add.

 2 Files will be open one is .Xaml and other is .xaml.cs

Step-3 : XAML

Drag and drop  Controls  in Design  or you can write manually in XAML in Control.xaml file

 Draging TextBlock

 ;Draging Image

Step-4 :  Dependencies

We need to create dependencies property in .xaml.cs file to expose these custom control's property to other pages :

Go to the .xaml.cs file, there you just type propdp and the press tap tap and the following code will appear in .xaml.cs file:

 Now just you need  to  ; 

 ; ; ; 1-Replace the ownerclass name with your custom control name and just after the "typeof(ownerclass)" there is "new propertyMetadata(0)" replace it with null.

 ; ; ; 2- Change the return type of this property according to the control

Here is the proper dependency property  after changing  in balck ractangle as showing in the below picture:  

Step-5 :  Bindig controls

Binding these controls with dependencies properties

 ; Binding TextBlock

 When you click on the TextBlock in design then on the right side in properties panel you can see the Common property where you have to click and the a new box will open  ; 

 ; 

 

 Here you  have to select the Binding type -> ElementName and then userControl->propertyname with its type-> (name: (string)) as showing in the picture below:

 ; ;Binding Image

 ; ; ; When you click on the Image in design then on the right side in properties panel you can see the Common property where you have to click as showing in the picture below  follow the Down arrow and the a new box will open:

 Here you  have to select the Binding type -> ElementName and then userControl-> Property name with its type-> (img: (ImageSource)) as showing in the picture below:

Step-6 : Ready for use

Finally here is your Custom control ready to use:

Custom Control (Assets->Project>MyUserControl)

 ; ;

You can Drag and drop it on page:

 ; 

 ; ; 

 ; ;

 From here you can change the text in TextBlock to be shown and select Image to be shown in Miscellaneous Property of this Custom Control as showing in the picture below: 

Step-7 : Run The Application 

Here is your result

 ; ;