Creating a Custom Control in Expression Blend with Custom Properties (WindowsPhone & Store)

Introduction

I am so excited today we are going to take some time to develop a custom control with our own custom property using Expressions Blend and Expressions Design. Every developer who is writing Windows Phone and Store Application would like to develop his/her own control. Without delay, let's dig in and develop our control.

In this case, I would develop a Custom Rating Control along with a custom property so it does not become really complex for beginners.

Brainstorming the Control

The very fist step when you are going to build a custom control is that you should brain storm the control first, make a rough sketch on a page. Analyze the need and find requirements. Make a rough draft and start developing it.

Divide It

It's a known proverb:

You can eat an elephant, bit by bit.

Divide your control in sub parts for example in our rating in contains a slider and 5 stars that would determine the value of the rating.

Properties Needed

Every custom control you develop would need some custom properties, in our case that is Rating Value, gather the requirements and note down the properties that your control may require.

Designing in Expressions Design

Expressions Design is a tool by Microsoft for designing just like Adobe's Photoshop, I personally recommend it because as it is from Expressions family,

"As Expressions Design is from Expressions family, so if BLEND knows XAML, Design also knows XAML the shapes you create in Expressions Design you can copy its XAML and paste directly into Visual Studio or Expressions Blend."

Drawing Stars

For our control, we need to draw stars, 5 stars actually aligned with each other, so for that I have used polygon tool in Expressions Design.

When I click on it, it allows me to draw a polygon, firstly when you draw the polygon you would find that it draws a triangle.

You need to change its edges and inner depth so that it draws the Star.

As you see above, there is a star drawn, now use this star and paste its four more copies.

Making Compound Path

A really handsome property of Expressions Design is that you can make a compound Path as each of the shapes drawn in Expressions Design is a Path so, I can make all stars a single compound path.

Give Gradient Color

Now you need to give it a gradient color, and manage it such that both the color stops are at same place and it looks like a solid filled color as you can see it in the above image.

Time To Copy XAML

Now just press:

Ctrl + Shift + C

Copy the XAML and now you can paste the XAML in Expressions BLEND.

Creating Control in Expressions Blend

Well, now we are ready to design our control, we have all the artifacts ready and shapes drawn, now it's time for Blend to make the life of a developer easy.

Go to the code part in the main grid and press Ctrl + V to paste the control, you would be able to see the control that is 5 stars with color.

Making User Control

To make our shapes a user control, we need to first give a color to our stars so that it's visible better as Black color create confusion. I have colored it Green.

Now place a slider in grid so that with respect to slider's value, the very color of star moves.

"That is the very reason I made both stops of gradient color same."

As you have created slider, you need to do the very gradient's data binding with the value of slider, you can just right click on stop and click on create data binding and select the property easily.

You need to do it for both the gradient stops. The next step is to manipulate the slider according to the ratings that is:

• Step frequency = 0.1
• Maximum = 1
• Minimum = 0

so that it becomes fluid and easy for user to judge the value and it would make UX (User Experience) better.

Make Into User Control

You don't need to create a User Control file for this as Blend makes the life of the developer easier so you just need to do simple 2 clicks.

Select both slider and stars and right click.

Then click on Make Into User Control.

Adding Custom Property

So far our control works, but we need to create its User Control so that we can use it again and again and in many projects.

As you see, the control works really fine but now it's time to add our own property that would be Slider Value and it would appear in the properties of Control.

Any guesses how we are going to do that??

Data binding? NO!

MVVM? NO!

We have something really magical in C#.NET that we can use to raise our custom property in control. That is called "DEPENDENCY PROPERTY".

A simple 2 lines code do the rest of work for you.

We would raise a property of "Slider Value " and then we would bind it to the slider. When we create a custom control, it creates 2 files for us. Control.xaml and Control.xaml.cs. Now it's time to write a little bit of code. You need not to switch to VS you can write it in Expressions Blend.

Here is the documentation for DEPENDENCY PROPERTY (MSDN docs):

Here is little piece of code I wrote to rise the property, now let's bind it to Slider.

Go to Slider in Control and in properties in Value, click on binding box and click on create data binding as we did it for binding gradients in our first section. Click on the "Custom Control", you will find a property named "Slider Value".

Bind Slider's Value to that very property. Congratulations, you are done!

Building It

Oops, what is this??

When I go to MainPage.xaml, it gives me a warning like thing, well no need to get worried. Just build it. Expressions Blend solution needs to be built frequently. If you find an error, the first thing is to build the solution.

Using the Control

You can use the control as it is now available in your assets:

Use it as many times as you want to.

Exporting Control

Yes, if you develop a really nice control you can export it. How? You have to do all the same steps but instead of creating Phone or Store app, you have to create Control Library project. Add your control file, copy the control you have already made. Build it in Release mode.

Wolah!! You have .dll file now in Bin folder of your project. Use it and enjoy if someone loves it, do give him .dll.

Conclusion

Creating custom control with the help of Expressions Blend is now really easy. Make your own custom control with your own custom properties. Use them in your projects and amaze the user as well as developer. Hope you found today's article really interesting. Don't forget to give your feedback in comments.

See you next time, till then HAPPY CODING!

The main article can be found at PERSONAL BLOG.