Windows Phone 7 : Style it using Expression Blend

  • Article

Expression Blend 4 for Windows Phone provides the same streamlined development workflow for Windows Phone 7 that was previously only available for Silverlight and .NET applications. The ability to take your ideas all the way from concept to completion helps accelerate the delivery of innovative applications on Windows Phone. You can download Expression Blend 4 for Windows Phone Beta here.
Now I will introduce some simple but useful tips for utilizing Expression Blend 4 for your Windows Phone Application.

  • Style your page element by using Expression Blend
  • Add Visual States to a Control
  • Make an image button and create pressed effect

Firstly, using Expression Blend 4 to style your page element. For example, style your page title.

 <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

This is default style of application title in MainPage.xaml when you initiate a new project. Here PhoneTextNormalStyle is applied to application title. Now we will create a new style by using Expression Blend.

1. Right click on MainPage.xaml and select open in Expression Blend...

 

2. In Expression Blend, choose MY APPLICATION first and you will see a blue color box surrounded this title and it indicates that this object has been selected. Right Click on MY APPLICATION and choose Edit Style -> Create Empty...

3. You will see a dialog appear and key in a name you would like to use for your style. And I named it "MyTitleStyle". The dialog is showed as below:

4. Choose different color scheme or font size from Properties windows. Besides the normal color palette,  there is also a Color resources introduced here which provides colors from phone theme, as showed in the screenshot below.

5. After editing the style, close your Expression Blend and open Visual Studio. It will ask you "This file has been modified outside of the source editor. Do you want to reload it?". Click on "Yes to All".

6. Open MainPage.xaml. And you will see your ApplicationTitle line has been modified as:

At the top of the page,you will see the style has been added.

 <phone:PhoneApplicationPage.Resources>

<Style x:Key="MyTitleStyle" TargetType="TextBlock">

<Setter Property="Foreground">

<Setter.Value>

<SolidColorBrush Color="{StaticResource PhoneAccentColor}">

</Setter.Value>

</Setter>

<Style> 

</phone:PhoneApplicationPage.Resources>

7.  However, now this style can only be used within this page. If you want it to become a global style, you can cut/paste this style into App.xaml section Application.Recources, showed as below:

 <Application.Resources>

<Style x:Key="MyTitleStyle" TargetType="TextBlock">

<Setter Property="Foreground">

<Setter.Value>

<SolidColorBrush Color="{StaticResource PhoneAccentColor}">

</Setter.Value>

</Setter>

</style>

</Application.Resources>

or when you try to build a new template, choose the scope as Application.

8. Now this style could be used in entire project. App.xaml's resource section could be used as a global CSS file. As such, you could manage your style more efficiently.

Secondly, we will try to add Visual States to a Control, for instance, add Pressed State effect to a button. There are different common states that a button could have, such as Normal, MouseOver, Pressed, Disabled... It is important to make changes to the states so that user get a sense of the result of his/her action. For example, we could make the button's label transforms.

1. Create a button on the MainPage.xaml. You could drag and drop one button from Toolbox and name it NewBtn with content New. Once you are done, it should be something look like this:

2. Repeat what we have done just now. Right Click on MainPage.xaml and choose to Open In Expression Blend...

3. In Expression Blend, right click on New Button and choose Edit Template ->Edit a Copy... Then you will see in the Objects and Timeline window, button control breaks down into ButtonBackground and ContentContainer.

4. Switch to States Window and you will see different CommonStates and FocusStates here. If you couldn't find the window, go to top menu bar. Under Window->; States. Make sure it is ticked.

5. Click on Pressed States and you may notice on the right top corner, it shows Pressed State recording is on. From Object and Timeline window, there are Background and BorderBrush under ButtonBackground. That's because initially, there is default animation of button control, once user clicks the button, its Background and BorderBrush will change colors.

6. Click on ContentContainer. We want to add an effect to make words transform while user is pressing the button. Find Transform under Properties panal and click on the Scale icon. Change X into -1. Click on Base States to stop recording.

7. Now, press F5 and see how it looks like. Click on New button and you will see the background changes as well as the label transformed.
Thirdly, I will show you how to make an image to button and create pressed effect.
1. Prepare two images that used as button later on, as showed below. Right Click on your project name and choose add existing item...

2. Drag and drop the light green check icon onto canvas.

3. Right-click on the check image and select Make Into Control...

4. Choose Control Type Button and type in name checkBtn. Define in this document. Here we are making that image acts like a real button.

5. Select checkBtn and edit Content under Common Properties to Yes. Meanwhile, rearrange the word Yes to the right corner for making the button looks better.

6. Choose Yes Button, right-click and choose Edit template ->; Edit Current

7. Choose [Grid] in Objects and Timeline windows and double click on dark green icon file in Project windows and you will see something like the picture showed below:

8. Click on Dark Green Image and set Opacity to 0%. What I wanted to do here is to show dark green check icon once user clicks on the button. So we will set Opacity back to 100% in the animation later.

9. Click on Pressed in States panel. Click on light green image and change Opacity to 0% and click on dark green image and change Opacity to 100%. Click on Base States to stop recording.

10. Now Press F5, you will see how your image act as a button and animated once user pressed on it.