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: 28899
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.
 
NewProject
 
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...:
 
OpenIn_ExpressionBlend
 
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:
 
Pencil
 
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:
 
MakeIntoControl
 
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:
 
MakeIntoControl
 
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:
 
EditControl
 
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:
 
MouseOver_State
 
Click on the Properties tab and choose Brushes. Change the Fill property to a reddish colour:
 
Silverlight/Brushes
 
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:
 
Background_Color
 
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:
 
Events
 
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: 
C# 
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
System.Windows.Browser.HtmlPage.Window.Invoke("HelloWorld", new string[] { "Hi there!" });
}
 
VB.NET 
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) {
            alert(value);
        }
        
    </script>
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:
 
Runtime_MouseHovering
 

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

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
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


User Feedback
Comment posted by ranjeet kumar on Monday, October 22, 2012 10:33 PM
Nice...

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel