UWP: Creating User Control

  • Article

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

https://2.bp.blogspot.com/-Y3oVbvAN5wM/Vlbo9Sq7nYI/AAAAAAAAANk/BQbYgdY429c/s400/A.png

Step-2:  Add user control

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

https://2.bp.blogspot.com/-lBZbWY-ew54/Vlbo9btLHuI/AAAAAAAAAN4/ZmICFj4r8DI/s400/B.png

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

https://2.bp.blogspot.com/-kn7refuwHRc/Vlbo9XnFqVI/AAAAAAAAAN8/kdkwl5NdKuc/s400/C.png

Step-3 : XAML

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

 Draging TextBlock

https://4.bp.blogspot.com/-kMQxvP6c2Bg/Vlbo-C5OMWI/AAAAAAAAAPU/eMgSRTx4vPM/s400/E.png

 ;Draging Image

https://3.bp.blogspot.com/-rDQ7IG1z8jI/Vlbo-ca5vgI/AAAAAAAAAOQ/BY9w4PJWs2g/s400/EE.png

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:

https://4.bp.blogspot.com/-IHY0jnkEvjM/Vlbo-oBBkTI/AAAAAAAAAPY/6KiqORAlPAc/s400/F.png

 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:  

https://2.bp.blogspot.com/-aaYZUWm8b1g/Vlbu_CAAJyI/AAAAAAAAAQU/QQz4uLjje8A/s400/FF.png

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  ; 

 ; 

https://4.bp.blogspot.com/-9BLc_FZyHiY/Vlbu_L_nVyI/AAAAAAAAAQg/F8X4kPb8_wg/s400/G.png

 

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

https://3.bp.blogspot.com/-BLzvjuLLl7U/Vlf-PalNdgI/AAAAAAAAARw/MuGbJ8r5TFM/s320/HH.PNG

 ; ;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:

https://2.bp.blogspot.com/-lwaPKk3pCgQ/Vlf_UFdlOvI/AAAAAAAAAR4/SQOwOkTLmHk/s400/GG.png

 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:

https://2.bp.blogspot.com/-7RKthgzpDiA/Vlf_uyJ0eVI/AAAAAAAAASA/-OT0vT5NMEI/s400/H.PNG

Step-6 : Ready for use

Finally here is your Custom control ready to use:

Custom Control (Assets->Project>MyUserControl)

 ; ;

https://1.bp.blogspot.com/-eNhg5rbKL0A/VlgAl8ntfgI/AAAAAAAAASM/uyDplCqRn2c/s400/I.PNG

You can Drag and drop it on page:

 ; 

 ; ; 

https://4.bp.blogspot.com/-DEYvfRovShQ/VlgA_bj58TI/AAAAAAAAASU/CWbdj8suiRw/s400/J.PNG

 ; ;

 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: 

https://4.bp.blogspot.com/-v2ZjEzDSSSM/VlgCTrcfbiI/AAAAAAAAASk/r8NS-F3izHg/s400/K.PNG

**Step-7 : **Run The Application 

Here is your result

 ; ;

https://4.bp.blogspot.com/-0VoDI6JOKyU/VlgDFWYRdrI/AAAAAAAAASw/qRgATKXmRNE/s320/L.PNG