Building Your First Windows Phone 7 Application (part 5) - Styling Your Application

6. Styling Your Application

Either Visual Studio or Microsoft Expression Blend 4 can be used to design XAML-based Silverlight interfaces. Microsoft Expression Blend 4 provides tools for the graphical manipulations, and animations for creating more complex controls than Visual Studio. You will look at the basics of Blend and how Blend makes it easy to style controls.

1. Open Microsoft Expression Blend 4, and select Windows Start => All Programs => Microsoft Expression Blend => Microsoft Expression Blend 4 for Windows Phone, as shown in Figure 14.

   Figure 14. Microsoft Expression Blend 4

   

2. Click "Close" when you are prompted with the project type selector.

3. In Blend 4, go to File => Open Project/Solution. Browse to the HelloWorld solution you created in the previous steps, as shown in Figure 15.

   Figure 15. Opening an existing project in Blend 4

   

4. When the project opens, click the TextBox. Notice that in the Properties window you will see various properties that can be changed. If you do not see the Properties window, open it by going to Window => Properties, as shown in Figure 16.

   Figure 16. Properties window in Blend 4 when the control is selected

   

5. In the Properties window's Brushes category, select Background => choose Gradient brush. Notice that the color editor now has ability to set the gradient color of the TextBox's background color.

6. Choose the first gradient color of blue at 21% and second color of yellow at 64%, as shown in Figure 17.

   Figure 17. Applying gradient background to TextBox in Blend 4

   

7. Go to Project => Run Project.

8. When Change Device Selection window shows, choose Windows Phone 7 Emulator, as shown in Figure 18.

   Figure 18. Change Device Selection window in Blend 4

   

9. Click OK and the HelloWorld application will start, as shown in Figure 19.

   Figure 19. HelloWorld after stylized in Blend 4