Creating a Custom Control in Expression Blend With Custom Properties (Windows Phone & Store)

Introduction

I am so excited! Today we will take some time to develop a custom control with our own custom property using Expressions Blend and Expressions Design. Every developer writing Windows Phone and Store applications 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 you all with a custom property so it does not become really complex for beginners.

Brainstorming the control

The very first step for building a custom control is that you should brainstorm the control first, make a rough sketch on a page. Analyze the needs and determine the requirements. Make a rough draft and start developing it.

Divide it

It's known as proverb:

You can eat an elephant, bit by bit.

Divide your control into sub parts, for example our rating 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 it 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 the Expressions family,

"As Expressions Design is from the Expressions family , and since Blend knows XAML, Design also knows in XAML the shapes you create in Expressions Design. You can copy it's XAML and paste it direct 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 the polygon tool in Expressions Design.

Stars

When I click on it , it allows me to draw a polygon.When you first draw the polygon you will find that it draws a triangle.

You need to change it's 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 it four more times.

Making Compound Path

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

Stars image

Provide Gradient Color

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

Time To Copy XAML

Now just press:

Ctrl + Shift + C

Copy the XAML and now you can paste the XAML into Expressions Blend.

Creating Control in Expressions Blend

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

Go to the code part in the main grid and press Ctrl + V to paste the control , you will 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 since the Black color creates confusion. I have colored it Green.

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

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

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

slider

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

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

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

Make Into User Control

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

Select both sliders and stars and right-click.

Then click on Make Into User Control.

make into usercontrol

Adding Custom Property

So far our control works but we need to create it's User Control so that we can use it many times and in many projects.

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

Any guesses how we will 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 a control. It is called "Dependency Property".

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

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

Here is the documentation for Dependency Property (MSDN docs).

cs code

Here is a small piece of code I wrote to raise the property , now let's bind it to the Slider.

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

Bind a 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, there is no need to worry. Just build it. The Expressions Blend solution needs to be built frequently. If you find an error then the first thing to do is to build the solution.

Using the Control

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

Use it as much times as you want to.

Exporting Control

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

Wolah!! You have a DLL file now in the Bin folder of your project. Use it and enjoy it. If someone loves it, do give him the DLL.

Conclusion

Creating a Custom Control using 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 the developer. I hope you found today's article really interesting. Don't forget to provide your feedback in the comments.

See you next time, until then Happy Coding!

Personal Blog: Blend Unleashed.