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:
<Button Content="Click
Me" Height="72" HorizontalAlignment="Left" Margin="12,6,0,0" Name="button1" VerticalAlignment="Top" Width="173" BorderThickness="0">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"
/>
<GradientStop Color="#FFDB1F1F" 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"Background="#FF00BE00" BorderThickness="0"></Button>
<Button Content="Click
Me 3" Height="72" HorizontalAlignment="Left" Margin="12,64,0,0" Name="button3" VerticalAlignment="Top" Width="173"BorderThickness="0">
<Button.Background>
<RadialGradientBrush>
<GradientStop Color="Yellow" Offset="0.102"
/>
<GradientStop Color="Black" Offset="1"
/>
</RadialGradientBrush>
</Button.Background>
</Button>
<CheckBox Content="Salad" Height="72" HorizontalAlignment="Left" Margin="12,142,0,0" Name="checkBox1"
VerticalAlignment="Top" Background="Red"BorderThickness="0"
/>
<CheckBox Content="Meat" Height="72" HorizontalAlignment="Left" Margin="228,142,0,0" Name="checkBox2"
VerticalAlignment="Top" Background="Red"BorderThickness="0"
/>
<CheckBox Content="Coke" Height="72" HorizontalAlignment="Left" Margin="12,194,0,0" Name="checkBox3"
VerticalAlignment="Top" Background="Red"BorderThickness="0"
/>
<CheckBox Content="Wine" Height="72" HorizontalAlignment="Left" Margin="228,194,0,0" Name="checkBox4"
VerticalAlignment="Top" Background="Red"BorderThickness="0"
/>
<CheckBox Content="Baklava" Height="72" HorizontalAlignment="Left" Margin="12,244,0,0" Name="checkBox5"
VerticalAlignment="Top" Background="Red"BorderThickness="0"
/>
<CheckBox Content="Chocolate" Height="72" HorizontalAlignment="Left" Margin="228,244,0,0" Name="checkBox6"
VerticalAlignment="Top"Background="Red" BorderThickness="0"
/>
<RadioButton Content="Single" Height="72" HorizontalAlignment="Left" Margin="12,322,0,0" Name="radioButton1"
VerticalAlignment="Top"BorderThickness="0">
<RadioButton.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.198"
/>
<GradientStop Color="#FF3BFF00" Offset="1"
/>
</LinearGradientBrush>
</RadioButton.Background>
</RadioButton>
<RadioButton Content="Married" Height="72" HorizontalAlignment="Left" Margin="228,322,0,0" Name="radioButton2"
VerticalAlignment="Top"BorderThickness="0">
<RadioButton.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.198"
/>
<GradientStop Color="#FF3BFF00" Offset="1"
/>
</LinearGradientBrush>
</RadioButton.Background>
</RadioButton>
<RadioButton Content="Divorced" Height="72" HorizontalAlignment="Left" Margin="12,381,0,0" Name="radioButton3"
VerticalAlignment="Top"BorderThickness="0">
<RadioButton.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.198"
/>
<GradientStop Color="#FF3BFF00" Offset="1"
/>
</LinearGradientBrush>
</RadioButton.Background>
</RadioButton>
<TextBox Height="72" HorizontalAlignment="Left" Margin="6,482,0,0" Name="textBox1" Text="TextBox"
VerticalAlignment="Top" Width="444"BorderThickness="0">
<TextBox.Background>
<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.