WP7 Tutorial 9 : Creating a Custom Button in Expression Blend (Part-2)

This tutorial is a continuation of  Part – I , as a part of the WP7 Tutorial series: By just copying and pasting the code from Visual just Studio to expression blend , we have created a replica of the Silverlight app in Expression Blend. Now we are going to design a custom button by following steps :

1. Confirm that the MainPage.xaml is open in the designer window and that the current workspace is set to Design. To view the current workspace, select Workspaces in the Window menu and ensure that the Design option is checked.

2. In the designer window, right-click the “Click Me” button, point to Edit Template and select Create Empty.

3. In the Create ControlTemplate Resource dialog, set the Name to FancyButton, keep the current value of “This document” in the Define in option, and click OK.

4. Make sure Objects and Timeline panel is visible,if not, select Window and then Objects and Timeline to show this panel. Else you can reset your workspace.

5. Change the current root layout container of the template. In the Objects and Timeline panel, right-click the child Grid element inside Template, point to Change Layout Type, and select Border.

6. With the Border element still selected in the Objects and Timeline panel, move to the Properties panel and under Appearance, set the value of the BorderThickness property to 2 for each of the sides and then set the value of the CornerRadius property to 15.

7. Next, in the Brushes section, select the Background property and pick the Gradient brush option. Then, select the left gradient stop and set its value to a light gray color, for example #FFADADAD. Next, select the right gradient stop and set its value to a dark gray color, for example #FF0A0A0A.

8. Now, in the Brushes section, select the BorderBrush property, choose a Solid color brush and choose a light gray color, for example #FFC0C0C0.

9. The next step is adding a caption. First, ensure that the Border element remains selected in the Objects and Timeline panel.

10. Now, switch to the Assets panel, select the Controls category, and scroll down the list displayed to the right of the category to locate the TextBlock control. Then, double-click the item in the list to insert an instance of this control nested inside the Border element of the template.

11.Now, in the Tools panel, pick the Selection tool or press V to restore selection mode.

12.In the Objects and Timeline panel, select the newly added TextBlock element. Then, in the Properties panel, expand the Brushes category and set the Foreground brush to a light color, for example #FFFFFFFF.

13.  Now, expand the Layout category and set the value of the HorizontalAlignment and VerticalAlignment properties to Center. Then, set the value of the Margin property to 10 for the left and right sides, and to 4 for the top and bottom sides.

14. Link the Text property of the TextBox control in the template to the Content property of the button templated control. To do this:

• Expand the Common Properties category
• Click Advanced property options—indicated by a square icon next to the value of the property
• Select Template Binding to display a list of properties in the templated control that can be bound to this property
• Choose the Content property from this listNotice that the value of the Text property changes to “Click Me”—the value currently set for the Content property of the button—and that the property is now shown with a yellow outline to indicate that it is template-bound.

15. Press CTRL + S to save the updated file.
16. You are now ready to test the new custom button. Press F5 to build and run the application