Converting any part into User Control using Expression Blend


Why This ??

We know how to create(Steps to create) a new user control in silverlight by using Visual Studio or Expression Blend(Add New – > Selecting usercontrol from templates etc .. etc..), but what if we have to convert an existing silverlight object????? well cut copy and paste in newly created user control is risky, so what is the best way ?? well here i tell you the easy way.

Solution:

In this article i am going to demonstrate to convert any existing silverlight object(like Grid, Group of buttons etc…) into User Control.

Here i am taking a sample application with header menu, i am going to convert this menu part(which is already created) into a User Control.

Step 1:

Inside Objects and Time line, right click on required object, in this case “MenuGrid”, a context menu opens look for “Make into UserControl”  and select. see in below image

Contextmenu

Select Make into UserControl

Setep 2:

After selection this option a popup will appears where you need to enter your user control’s name, in this case i am just leaving the default one, see it in below image.

popup

Provide a name to your user control

Now our control is created, if you can check in solution explorer a new xaml page(not a page it’s a User Control) is automatically created by Blend, see it in below image.

New page created

if you can see in xaml, you can find a xaml tag called <Local/> in this example <Local:MenuGridControl /> that is our User control, Blend automatically adjusts our controls margins as per our layout design. see it in below image.

Blend automatically added a Margin property to our control.

Updated layout

That’s it it’s very easy to convert a existing object in a user control, using Expression Blend.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s