Click here to Skip to main content
13,248,107 members (35,079 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5.6K views
6 bookmarked
Posted 16 Dec 2015

Custom Control in Blend 2015

, 16 Dec 2015
Rate this:
Please Sign up or sign in to vote.
How to create 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.

1064937/1.png

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Zain Nisar
Software Developer (Junior)
Pakistan Pakistan
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
QuestionProject Code Pin
Antonio Barros18-Dec-15 6:09
memberAntonio Barros18-Dec-15 6:09 
AnswerRe: Project Code Pin
Zain Nisar19-Dec-15 10:09
memberZain Nisar19-Dec-15 10:09 
Question5 but could you add some info Pin
Alexey KK17-Dec-15 9:05
professionalAlexey KK17-Dec-15 9:05 
AnswerRe: 5 but could you add some info Pin
Zain Nisar17-Dec-15 21:47
memberZain Nisar17-Dec-15 21:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 16 Dec 2015
Article Copyright 2015 by Zain Nisar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid