Creating Custom Controls In Universal Windows Platform UWP

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.