Building User Interfaces for Windows Phone 7

First of all, I would like mention that this is a beginner-level article and I will write it as simple as I can.

UI is a very important key in Windows Phone 7 Applications. If you want to impress the folks, you'll need to build your own UI styles.

There are a couple of methods building styles for Windows Phone:

-Traditional Way(using images - Silverlight)
-XAML Way(color-based styling - Silverlight)

Since Microsoft advices you to use XAML Way, I will also talk about "The Traditional way" if you don't have Blend 4 product or if you don't want to use xaml.

This article will help you build 4 UI control:

Button
CheckBox
RadioButton
TextBox

Lets take a look at how these controls look like by default:

This is the default style for Windows Phone 7 Controls. You'll absolutely play with styles because of visuals matters for application development.

Then lets start explaining Traditional Way:

TRADITIONAL WAY

If you're familiar with Web Programming, you already know CSS is everything for styling purposes. While using CSS, you're able to skin UI with your own styles. These styles can be color-based or image-based.

Since this method is being used widely in the Web Development, I preferred to call it "Traditional Way" by linking Web Development and Mobile Development's similar aspects such as WYUIWYG-like Designers.

In Traditional Way, you'll need to have image files of the specified control according to the events of the control has already within. For a Button control you'll need to have at least 4 image files:

Button_Down (when button is pressed)
Button_Over (when mouse is over the button)
Button_Up (Default view of the control)
Button_Disabled (when button Enabled property set to "False")

A nice sample to Button Styling:

Button_Down:

Button_Over:

Button_Up:

Button_Disabled:

But for a TextBox control only one image is enough (if you don't plan additional styling for "GotFocus" and "LostFocus" events).

While building our example, we'll be using only one image. Since I don't have any Windows Phone 7 Device, it will be useless to test Down and Over events. They must be tested on a real device to get effective results. If Microsoft blesses me with his Holy Windows Phone 7,I'll thank and pray for them :) And of course contribute more about this subject.

So lets start by building our application:

I created an Silverlight for Windows Phone 7 Application and called it "WP7UISkinning" to show you how Traditional way works.

All right our project has been created and now what we're going to do is to add the controls I've talked earlier: Button, CheckBox, RadioButton and TextBox

Made a design like that. Now its time to import our images in our project. For that I advice you to create a New Folder and name it "Skins".

These images will be used in our application:

(Button)
(CheckBox)
(RadioButton)
(TextBox)

Import them in your application by creating a new folder named "Skins":

Now we've two options:

1) If you want to see the skins applied at design time, you need to set Background Property of each control as the images in Skins folder and don't forget to set their BorderThickness to 0.For a rounded-corner Button, BorderThickness should be set to 0.Here's how we set the Background property of the Button as an image that will skin the control. You need to choose Picturebox icon below the Background and Select the image. Then a new dialog window will appear asking you to choose an image from your Skins folder:

Try the same things with other controls.

And now you can see and test it in Editor.

Visuals is very important in application development and now you see how it changed an application into a nice-looking one.

Lets run it and try it on the emulator:

Looking good, isn't it?

2) If you'd like to skin by coding you'll have to write these codes in your application:

First create 4 Brushes for each control:

ImageBrush brush = new ImageBrush();
ImageBrush brush_checkbox = new ImageBrush();
ImageBrush brush_radiobutton = new ImageBrush();
ImageBrush brush_textbox = new ImageBrush();

Note: You can create one brush and change it dynamically. But in our application we've created one for each control.

Then in your MainPage constructor, add these codes which assigns the ImageSource to your image files in Skins folder:

brush.ImageSource = new BitmapImage(new Uri(@"Skins/Button.png", UriKind.Relative));
brush_checkbox.ImageSource = new BitmapImage(new Uri(@"Skins/CheckBox.png", UriKind.Relative));
brush_radiobutton.ImageSource = new BitmapImage(new Uri(@"Skins/RadioButton.png", UriKind.Relative));
brush_textbox.ImageSource = new BitmapImage(new Uri(@"Skins/TextBox.png", UriKind.Relative));

Now the only thing you're going to do is to add these codes to PhoneApplicationPage_Load event to iterate all the controls and their types and set the right brush for them alongside with their BorderThickness:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
foreach (UIElement uielement in ContentPanel.Children)
{
if (uielement.GetType().Name == "Button")
{
((Button)uielement).Background = brush;
((Button)uielement).BorderThickness = new Thickness(0);
}
else if (uielement.GetType().Name == "CheckBox")
{
((CheckBox)uielement).Background = brush_checkbox;
((CheckBox)uielement).BorderThickness = new Thickness(0);
}
else if (uielement.GetType().Name == "RadioButton")
{
((RadioButton)uielement).Background = brush_radiobutton;
((RadioButton)uielement).BorderThickness = new Thickness(0);
}
else if (uielement.GetType().Name == "TextBox")
{
((TextBox)uielement).Background = brush_textbox;
((TextBox)uielement).BorderThickness = new Thickness(0);
}
}
}

And now run the application and see the results:

Same method applied by coding.

This was the Traditional Way, using images for styling User Interfaces. Its that easy!

Now lets keep going by explaining the other method.

XAML WAY

Using XAML for styling user interfaces is a long task if you write XAML by coding. For these purposes you can use Visual Studio's own Properties Panel for creating Styles or if you're looking for an advanced XAML Editor you can use Microsoft's Expression Blend 4 product which works great with Windows Phone 7 Applications. Microsoft Expression Blend 4 is developed for UX Designers so its quite obvious that developers can have hard times understanding how it works.

Lets create a new application similar to the previous one:

First of all lets create styles using Visual Studio 2010.

To give XAML based Style ; remember

Select a button in the ContentPanel and then get to the Background Property. There you shall see 4 icons:

Let me explain what they're used for.

When you click this icon, it will not apply any color to the control, it'll be Transparent. Whatever the background color selected for ContentPanel, this control's Background color will be the same.

When you click this icon, it will apply only one image to the control. You can choose RGBA values in here.

This icon will apply a Gradient color on the color when its clicked. You can again choose RGBA values here. You can add additional Stops(colors) and choose the style(Vertical, Horizontal, Radial Gradient)

As you can understand we've already implemented "Traditional Way" using this section. This is where we can skin a control with an image file.

Now lets have some fun with the controls a little bit. I've created this XAML:

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0076FF" Offset="0" />
<GradientStop Color="Yellow" Offset="1" />
</LinearGradientBrush>
</TextBox.Background>
</TextBox>

And here's the result:

Styling in Visual Studio 2010 is that nice! Now lets skip to using Blend 4 tool for styling UIs.

If you wish to use Blend 4 integration with your existing Windows Phone 7 Application (Silverlight only), then you must right-click on your project and select "Open in Expression Blend…":

Click on it. And wait for Blend 4 to prepare your application.

When Blend 4 opens you will receive a warning about security issues.In that situation click Yes and Continue. We trust Microsoft :)

This is how our project looks like when we first open it.

You have additional options for designing your UI styles in Blend such as: Skew, Scale and Rotate.

The first button you see with "Click Me" label is skewed. You can play with it how you want.

And now we have scaled it to be much more smaller. All you need to do is to move the corner-points to a location to make it bigger or smaller.

If you wish to rotate a control, you need to get near leftmost or rightmost top and bottom points and there you shall see rotate icon which will help you rotating a control easily.

This is the XAML I have used in my application:

<Button Content="Click Me" Height="63" HorizontalAlignment="Left" Margin="35.061,8,0,0" Name="button1" VerticalAlignment="Top" Width="148.878"Foreground="White"
RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
<Button.RenderTransform>
<CompositeTransform SkewX="-0.774" TranslateX="0.486"/>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="Click Me 2" Height="72" HorizontalAlignment="Left" Margin="228,6,0,0" Name="button2" VerticalAlignment="Top" Width="169" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="Click Me 3" Height="72" HorizontalAlignment="Left" Margin="12,64,0,0" Name="button3" VerticalAlignment="Top" Width="173"RenderTransformOrigin="0.5,0.5" >
<Button.RenderTransform>
<CompositeTransform Rotation="179.8"/>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<CheckBox Content="Salad" Height="72" HorizontalAlignment="Left" Margin="12,142,0,0" Name="checkBox1" VerticalAlignment="Top" >
<CheckBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF0084FF"/>
</LinearGradientBrush>
</CheckBox.Background>
</CheckBox>
<CheckBox Content="Meat" Height="72" HorizontalAlignment="Left" Margin="228,142,0,0" Name="checkBox2" VerticalAlignment="Top" >
<CheckBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF0084FF"/>
</LinearGradientBrush>
</CheckBox.Background>
</CheckBox>
<CheckBox Content="Coke" Height="72" HorizontalAlignment="Left" Margin="12,194,0,0" Name="checkBox3" VerticalAlignment="Top" >
<CheckBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF0084FF"/>
</LinearGradientBrush>
</CheckBox.Background>
</CheckBox>
<CheckBox Content="Wine" Height="72" HorizontalAlignment="Left" Margin="228,194,0,0" Name="checkBox4" VerticalAlignment="Top" >
<CheckBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF0084FF"/>
</LinearGradientBrush>
</CheckBox.Background>
</CheckBox>
<CheckBox Content="Baklava" Height="72" HorizontalAlignment="Left" Margin="12,244,0,0" Name="checkBox5" VerticalAlignment="Top" >
<CheckBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF0084FF"/>
</LinearGradientBrush>
</CheckBox.Background>
</CheckBox>
<CheckBox Content="Chocolate" Height="72" HorizontalAlignment="Left" Margin="228,244,0,0" Name="checkBox6" VerticalAlignment="Top" >
<CheckBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF0084FF"/>
</LinearGradientBrush>
</CheckBox.Background>
</CheckBox>
<RadioButton Content="Single" Height="72" HorizontalAlignment="Left" Margin="12,322,0,0" Name="radioButton1"
VerticalAlignment="Top"Background="#FFF1FF00" />
<RadioButton Content="Married" Height="72" HorizontalAlignment="Left" Margin="228,322,0,0" Name="radioButton2"
VerticalAlignment="Top"Background="#FFF1FF00" />
<RadioButton Content="Divorced" Height="72" HorizontalAlignment="Left" Margin="12,381,0,0" Name="radioButton3"
VerticalAlignment="Top"Background="#FFF1FF00" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="6,482,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="444" >
<TextBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF1FFF00" Offset="1"/>
</LinearGradientBrush>
</TextBox.Background>
</TextBox>

And here is the result what I have built in Blend 4:

Its easy, isn't it? Using Blend 4 or Visual Studio 2010 doesn't matter, you can add nice effects on your UI controls and skin them as you like.

Hope you liked this article. If you have any suggestion that can improve this article, feel free to stop by and drop a comment. I'll reply as soon as I can and update it.

3 Comments

Join the conversation! Your thoughts help the community grow.

Ibrahim Ersoy15y ago
Thank you for reading.Its up to your imagination and art eye to make them look much more better ;)
JONATHAN philipie15y ago
It is nice
- Mike Gold15y ago
  I will take advantage of your advice for creating buttons. My window 7 phone app buttons are a bit boring now.