WP7 Tutorial 8: Creating a Custom Button in Expression Blend-I

Posted by on
After learning about how to create and deploy an application in Silverlight version of CTP tools, as a part of this WP7 Tutorial Series, we move on to Expression Blend. Expression Blend is an authoring system for professional designers to build user experiences that target the .NET 3.0 + platform, and more specifically, WPF or Windows Presentation Foundation.
In general, Silverlight controls has a separate logic from their visual appearance using templates.  A ControlTemplate specifies the visual structure and visual behavior of a control. You can customize the appearance of most controls by modifying their default ControlTemplate settings. This allows you to change the appearance of the control without changing its functionality. For example, you can make the buttons in your application round rather than the default square shape, but the button will still raise the Click event.
In this tutorial, you open the Visual Studio project that you created in the previous exercise in Expression Blend and replace the ControlTemplate of the button to alter its look and feel. Because you create a ControlTemplate in XAML, you can change a control’s appearance without writing any code.
blend1 WP7 Tutorial 8: Creating a Custom Button in Expression Blend I
1. Open Microsoft Visual Studio 2010 Express for Windows Phone
2. If you completed the steps in the previous exercise, you may continue with the solution that you created for that exercise.
3. Open the current solution in Expression Blend. To do this from Visual Studio, right-click MainPage.xaml in Solution Explorer, and then select Open in Expression Blend. If this option is unavailable—the most likely reason is that your current version of Expression Blend does not support the necessary project type—follow the next steps to create a temporary project that you can edit using Expression Blend
4. Open Microsoft Expression Blend
5. Create a new application project to hold your design assets temporarily. To do this, open the File menu and then choose New Project
6. In the New Project dialog, select the Silverlight project type and then choose the Silverlight 3 Application template. Set the name to DesignHelloPhone, choose a suitable location, and keep the language as Visual C#, and then click OK.
blend2 WP7 Tutorial 8: Creating a Custom Button in Expression Blend I
7. In Visual Studio, double-click App.xaml in Solution Explorer to open this file in the editor. Now, open the XAML view, and then select and copy the entire Application.Resources section to the clipboard
8. Open Expression Blend again , expand the DesignHelloPhone project in the Projects panel, and double-click App.xaml to open the file
9. Point to Active Document View in the View menu and select XAML View.
10. Find the Application.Resources section in this file—it should be empty—and then paste the contents of the clipboard to replace it.
11. Now, locate the section in the newly inserted text that is delimited with the comment “***** LISTBOX/LISTBOXITEM TEMPLATES *****”; it contains styles that are not compatible with a Silverlight 3 project. Delete the entire section between the start and end delimiters.
blend3 WP7 Tutorial 8: Creating a Custom Button in Expression Blend I
12.Now locate the Application element at the top of the file and insert a new namespace declaration to reference the System namespace in the mscorlib assembly, as shown below.

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="DesignHelloPhone.App"
xmlns:system="clr-namespace:System;assembly=mscorlib"
>

  
    
    
    #FF1F1F1F
    Black
13. Now save the changed App.xaml in Expression Blend.
14. Next, open Visual Studio again and open the MainPage.xaml file in XAML view. Then, select and copy the Grid element named LayoutRoot including its children to the clipboard.
15. Return to Expression Blend, open the MainPage.xaml file in XAML view, and then paste the contents of the clipboard to replace the empty LayoutRootGrid element in this file.
16. In the MainPage.xaml file, locate the root UserControl element and change the values of the Height attribute to 800 and the Width attribute to 480.
17. Go back to Visual Studio, right-click MainPage.xaml.cs in Solution Explorer and select View Code. Then, copy the ClickMeButton_Click event handler to the clipboard.
18. Finally, return to Expression Blend, expand the MainPage.xaml node in the Projects panel, double-click the MainPage.xaml.cs to open the file in the editor, and paste the code in the clipboard into the MainPage class.
Now we have successfully replicated our project into expression blend. To create a design for the custom button  please read the next tutorial to be published tomorrow.

Comments

Post a Comment