Expression Blend 3 and the New 'Make Into Control' Feature

Posted by: Malcolm Sheridan , on 7/10/2009, in Category Silverlight 2, 3, 4 and 5
Views: 38778
Abstract: The following article demonstrates how to use Expression Blend 3 to draw an object with a pencil and make that into a clickable button.
Expression Blend 3 and the New 'Make Into Control' Feature
With Silverlight 3 and Expression Blend 3 released, I thought it would be an opportune time to go through one of the coolest features in Blend 3. The feature is Make Into Control and is available when you draw shapes in Blend 3. This gives you the ability to draw any shape and turn it into a Button, Slider or a ListBox! If you’re not blown away by this you will be by the end of this article! To get started you need to download Silverlight 3 Tools for Visual Studio SP1 and Microsoft Expression Blend 3. I had some issues running Silverlight 2 & 3 on the same machine, so I setup this code in a virtual machine.

To begin with open Visual Studio 2008 and choose File > New > Project > Silverlight > Silverlight Application.
When you click OK a new dialog will appear. Accept the default settings. Navigate to the Silverlight project and right click on the MainPage.xaml file and choose Open in Expression Blend...:
Blend will open and you’ll have an empty xaml page in front of you. On the far left of the page is the toolbar. Click the Pen icon and drag your mouse to the right and select the Pencil icon:
Now it’s time to draw anything you want. For this example I drew a triangle. Please note I am not a graphic artist! The cool new feature in Blend is you can select your triangle and make that into a control. Right click on the triangle and choose Make Into Control:
A new dialog will open and it gives you the ability to make this control a Button, CheckBox, ListBox, RadionButton, ScrollBar or any other control you have installed. For this example we’ll choose Button and name the control TriangeButton:
Click OK. Now you have a Button control. Cool huh! Let’s add a state change and a button click event. Right click on TriangleButton and choose Edit Control Parts (Template) > Edit Template:
This gives you access to the VisualStateManager via the States window which, by default, is alongside the Projects tab. Click on the States tab and click the MouseOver state. This will start the state recording:
Click on the Properties tab and choose Brushes. Change the Fill property to a reddish colour:
Stop the recording and save your work. If you jump back into Visual Studio it will ask you to reload the xaml file. Reload it and run your project. You’ll see the background changes colour when you mouse over it:
Now let’s add a click event. Jump back into Blend and select the TriangleButton in the designer. Click on the Events button and double click the Click event:
The code behind window will open. Close that and save your work because we will jump back to Visual Studio to add the code. Open the code behind page and add the following code: 
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
System.Windows.Browser.HtmlPage.Window.Invoke("HelloWorld", new string[] { "Hi there!" });
Private Sub Button_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
System.Windows.Browser.HtmlPage.Window.Invoke("HelloWorld", New String() { "Hi there!" })
End Sub
The code above will call a JavaScript function called HelloWorld and pass one argument. Inside of your web application, open the SilverlightApplication1TestPage.aspx page and add the following JavaScript:
<script language="javascript" type="text/javascript">
        function HelloWorld(value) {
We’re all done now! If you run your project you’ll see the TriangleButton changes colour when you hover your mouse over it, and if you click it the JavaScript code runs as expected:

This is just one small part of what’s new in Blend 3. By giving you the ability to make any image or drawing a control, you can create your own custom controls through your favourite graphics program. The possibilities are endless.

The source code of this article can be downloaded from here

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by ranjeet kumar on Monday, October 22, 2012 10:33 PM