Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 3 – Using Expression Blend to Design the WP7 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.    [more]

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.

clip_image002

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.

clip_image004

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.

clip_image005

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.

clip_image006

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.

clip_image007

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.

clip_image008

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.

clip_image009

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.

clip_image010

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.

clip_image011

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.

clip_image012

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.

clip_image013

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.

clip_image014

Now we are done with our design and the user interface will look like below. We can see the button customized and look with a rich user interface as shown in the screen below.

clip_image015

Now go back to the Visual Studio IDE and load the project, we can see a alert window that some of the resources are changed outside Visual Studio and do we need to restore the changes. Click on Yes to All and proceed further as shown in the screen below.

clip_image016

Now build and execute the application by pressing F5 button from the keyboard or by directly selecting the Build solution. We can see the application loaded on to the Windows Phone 7 Emulator and we can see the output as shown in the screen below.

clip_image017

Conclusion:

So in this article we have seen how to use the Expression Blend to design a rich user interface for the Windows Phone 7 Application and load it to the Windows Phone Emulator.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Comments (1) -

rahul ameta
rahul ameta
3/17/2013 9:47:02 AM #

I want to learn advanced MS Expression Blend tool. How this learn possible.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter