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 we can 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 and 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 simply drag and drop that control anywhere I want to use it in my application, without starting from scratch so let's 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.

Select Template

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

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

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.

Dependency Property

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

Dependency Property For Each Control

For 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 pic.

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.

When you are done, press the Ctrl +S, 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 your object and time line window.

Before

After

Hopefully the issue will be resolved.

Data Binding for Controls

Time to do Data Binding for each control so let's begin, steps include.

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.

Image

Steps will be the 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.

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.

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.

   

Using Custom Control

Simply use that 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.

   

Layout and Design

You can also design and layout your custom control.

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 times as you want to and can also customize it, by adding any feature you want to. Happy coding.