Using Expression Blend to Design the Windows Phone 7 Application

Introduction

In this article we are going to see how to design the user interface of a Windows Phone 7 Application using Expression Blend. Expression Blend is one of the product of the Expression Suite of applications, which is used to design rich user experience for a XAML based application. Basically we can design any Silverlight, WPF application which are XAML based and now we can use this product to design the Windows Phone 7 Application as well which uses the XAML code.

Expression studio is a licensed version, but for developing the Windows Phone 7 application the Expression blend is available as free with the Windows Phone 7 SDK downloaded initially when we made the development environment ready (Check my first article on Overview of Windows Phone 7 Development). Let us see the step by step process on how to use the Expression Blend product to make rich user experienced design for the Windows Phone 7 Application.

Steps

Let us take the sample (F5DebugWp7Helloworld) application which we developed in our earlier article (Learn Windows Phone 7 Development in 31 Days Day 2 Creating a Hello World Silverlight Application in WP7). Now to start with open the application in Visual Studio 2010 IDE and open the project and we can see the application look like below.



Now we will design this page using Expression Blend. To start with first locate the page in the Solution Explorer of Visual Studio 2010 and then right click and select Open in Expression Blend as shown in the screen below.



Clicking on Open in Expression Blend will load the Expression Blend IDE and we can see the page opened as shown in the screen below.



No we need to select the button (SUBMIT) from the Object and Timeline pane on the left side and right click to select Edit template option to create a Empty template as shown in the screen below.



Now we can see a pop up window which has the option to create the empty Control template resource for the button. Just click on OK to proceed further without changing any option.



Now select the GRID from the Objects and Timeline pane and right click to change the layout. From the list of layouts select Border as shown in the screen below.



Now we need to customize the design of the button, go to Appearance section and change the border thickness and corner radius as shown in the screen below.



Non change the background color by selecting the Brushes section. Change the color as per the requirement and also we have option to customize by providing the color code directly as shown in the screen below.



Similarly we need to change the setting for the Border Brush by selecting from the color pallet or by providing the color code as shown in the screen below.



Now we need to switch to the Assets panel and select the text block tool from the controls pane under the Border element of the template as shown in the screen below.



Now we need to customize the design for the text block by selecting the appearance and layout sections on the right side panel and changing the alignments as shown in the screen below.



Now this step is very important, to change the content of the text property select the Common Property category and click on Advanced Property option to select the template binding to Content as shown in the screen below.