Creating Custom Controls In Universal Windows Platform UWP

Why we need custom controls?

Microsoft Blend provided you the different controls that you can use in your application style, layout and animation. Let suppose you have to design profiles of 80 students of computer science batch. What you need every time to design profile?

1. Rectangle
2. Image Control
3. TextBlock for Name
4. TextBlock for Age

This will take average 35-40 seconds every time drag and drop of controls then changing content of each student. Approximately 55 minutes required for same basic steps of 80’s students profile design. Here comes a thought; why not we create a custom control named “ProfileDesign” that would be composite of all required control for profile design by programming a class that inherits from one of the System.Windows.Controls classes of Windows Presentation Foundation (WPF) or Microsoft Silverlight. To include properties in our custom control that can be modified in the Properties panel of Blend, we define dependency properties in your class. So that we just drag and drop ProfileDesign control every time and update its properties respectively to each student. This will reduce your attention and half the total time required using generic method.

Now let’s starts how to create custom controls

Please hold on before starting, be attentive, you have to focus just five minutes of your life and after that this technique or the versatility of Blend, I assured you will save your many hours of life.

Step 1: In Blend 2015 create your windows universal blank app project here named it CustomControls.

Step 2: Add new user control named ProfileDesign. For user control right click on you project, click on add, new item, then user control.

Step 3: Now in ProfileDesign Control we have to design the Rectangle, Image Control and two textblocks for name and age respectively.

Step 4: Now we have to define the dependency properties of these controls so that we can use these for data binding later. Open your class ProfileDesign.Xaml.cs will get by expanding ProfileDesign.Xaml. For creating dependency properties write propdp and press tab twice.

• 1^st for Rectangle properties we have used the Brush Property Name OverlayBrush,In typeof owner class name of the property (ProfileDesign) and then null the meta data, the data before the actual data.
  
  
• 2^nd for the Image property we will use the ImageSource, Property name ProfileImage, update the owner class name (ProfileDesign) and metadata null.
  
  
• 3^rd for the textBlocks Student name and age use string and named StudentName, StudentAge respectively with same owner class (ProfileDesign) and null meta data.

Press Ctrl+s, Ctrl+Shift+B.

Step 5: Now binding the controls. Select the Image control from objects and timeline, in Properties Source, create databinding, databinding name, Element Name. Select User Control and in Path the name of property in our case ProfileImage. Respective properties for others controls as in the following images,

Then Build the solution Ctrl+Shift+B.

Step 6: As Build, go to the MainPage.xaml. In Assets let us see, is my control available is there?

Now just drag and drop on main page. Go to properties and remember all the properties of our custom control except the brush is in the miscellaneous tab.

I have added the six ProfileDesign Controls in Main Page at miscellaneous tab click on Profile Image add the image. Also add Student Name and Student Age.

Now go to the brush tab, Overlay Brush and choose your color.

So there is your custom control. After that I have designed five new profile of my fellows just in one minute. Simple drag and drop the ProfileDesign Control from and update the contents.

You can do anything with your custom controls such as, styling, data binding, animation, etc.

Link of hands-on code.