Custom Control In Blend 2015

Introduction

Now we can create our own custom controls in Blend for Visual Studio 2015, so let’s see how can we make a simple custom control.

Example

I am making a custom control of a “sign up page” and for this I am going to need the following,

  1. Image (image property un assets)
  2. Email or user name (text block)
  3. password (password block)
And once I create a control, the benefit is that I can just simple drag and drop that control anywhere I want to use it in my application without starting from a scratch. So, let us see how Blend 2015 can help us in making a simple Custom Control.

Steps

The simple steps of creating a custom control are mentioned below.

New Project

Simply create a new project in Blend 2015.

1.PNG

Select Template
  1. Select Universal
  2. Select Blank App.
  3. Name your solution, for instance “CustomControl”.
2.PNG

Add New Item
  1. Go to tool bar.
  2. Select Project.
  3. Select Add New Item from the project drop down menu
  4. Select User Control.
  5. Name it, for instance DesignControl.
3.PNG

User Control

A new User Control is added now, work on it, just select all the items you needed and drag and drop on the window. In my case as I mentioned I need three things and an additional rectangle, all my features will be in this rectangle which will act like a grid.

  1. Select a Rectangle from the Tool Bar and drop on Design Control.XAML
  2. Select Image from the Assets and drop on Design Conrol.XAML.
  3. Select Text Block from Tool Bar and drop on Design Control.XAML.
  4. Select Password from your Tool Bar and drop on Design Control.XAML.
  5. You can also change name for our own convenience, like I did in Objects and Timeline window.
4.PNG

Dependency Property

In the next step, simply add dependency property the code snippet of which is writing propdp and press tab twice. It will appear like this on your Design Control.XAML.cs window.

5.PNG

Dependency Property For Each Control

For your each control you add in your DesignControl.Xaml you have to add a dependency property for it in Design Control.Xaml.cs and then change the attributes, you can take the help of the screenshot,

  1. Go to your DesignControl.xaml.cs window.
  2. Write propdp and press tab key twice.
  3. Do the above step for each control.
  4. In my case as I have four controls (rectangle, image, textblock, password). I will add four dependency properties, each for each control.
  5. Assign values to your dependency properties.
6.PNG

7.PNG

When you are done , press Ctrl +S and Ctrl+shift+B.

Data Binding

Before moving to Data Binding, if you see a red line appear under your email or password in your dependency property there is no need to worry about. All you have to do is change the name of your control in you object and timeline window.

Before

4

After

8.png

Hopefully the issue will be now resolved.

Data Binding for Controls

Time to do Data Binding for each control, so lets begin. Here are the steps,

Rectangle

  1. Select Rectangle in Object and TimeLine window.
  2. Select Fill in properties window, right click the small box next to it.
  3. Go to Create DataBinding.
  4. Select Element Name.
  5. Select User Control.
  6. Select MyBrush.
  7. Press OK.
8

9.PNG

Image

Steps will be same every time, here you go.

  1. Select Image.
  2. Select Source from Property windows, right click the small box.
  3. Choose Create Data Binding.
  4. Select Element Name.
  5. Select User Control.
  6. Select Image Source.
  7. Press OK.
10.png

11.PNG

TextBlock
  1. Select your textBlock=EmailBlock.
  2. Select Text from property window, and right click the small box.
  3. Select Create Data Binding.
  4. Select Element Name.
  5. Select User Control.
  6. Select Email.
  7. press OK.
12.png

13.PNG

Password
  1. Select Password.
  2. Select Password from the properties window, right click the small box.
  3. Choose Create Data Binding
  4. Select Element Name.
  5. Select User Control.
  6. Select Password(string).
  7. Press OK.

Now simply Build your solution by pressing Ctrl+Shft+B.

Main Page.Xaml

  1. Go to Main Page.Xaml.cs.
  2. Select Assets.
  3. Select Controls.
  4. Check if your control is available.
  5. DesignControl is there.
  6. Drag and drop the control on.
16

Using Custom Control

Simply use the custom control you just created in your Main Page.Xaml.cs.

  1. Add image if you have any from your Assets folder.
  2. Add the Email and password in property window.
17.PNG

Layout and Design

You can also design and layout your custom control.

18.PNG

Conclusion

The advantage of the Custom Control is that next time you don’t have to start from scratch, you can simply drag and drop your control as many time you want to and can also customize it, by adding any feature you want to. Happy coding!

Up Next
    Ebook Download
    View all
    Learn
    View all