Share via

Custom Controls in Blend 2015

  • Article

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 gonna need a

  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 lets 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

https://zainnisar237.files.wordpress.com/2015/12/1.png?w=700

Select Template

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

https://zainnisar237.files.wordpress.com/2015/12/2.png?w=700

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.

https://zainnisar237.files.wordpress.com/2015/12/3.png?w=700

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.

https://zainnisar237.files.wordpress.com/2015/12/4.png?w=700

Dependency Property

In your next step , simple 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.

https://zainnisar237.files.wordpress.com/2015/12/5.png?w=700

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

https://zainnisar237.files.wordpress.com/2015/12/6.png?w=700

https://zainnisar237.files.wordpress.com/2015/12/7.png?w=700

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 you object and time line window.

Before

https://zainnisar237.files.wordpress.com/2015/12/4.png?w=700

After

https://zainnisar237.files.wordpress.com/2015/12/8.png?w=700

Hopefully the issue will ne resolved .:)

Data Binding for Controls

Time to do Data Binding for each control so lets 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.

https://zainnisar237.files.wordpress.com/2015/12/8.png?w=700

https://zainnisar237.files.wordpress.com/2015/12/9.png?w=700

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.

https://zainnisar237.files.wordpress.com/2015/12/10.png?w=700

https://zainnisar237.files.wordpress.com/2015/12/11.png?w=700

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

https://zainnisar237.files.wordpress.com/2015/12/12.png?w=700

https://zainnisar237.files.wordpress.com/2015/12/13.png?w=700

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

    https://zainnisar237.files.wordpress.com/2015/12/16.png?w=700

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.

    https://zainnisar237.files.wordpress.com/2015/12/17.png?w=700

Layout and Design.

You can also design and layout your custom control.

https://zainnisar237.files.wordpress.com/2015/12/18.png?w=700

Conclusion

The advantage of the Custom Control is that next time you don’t have to start from a 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 :)