Windows Phone - XAML Styling

Introduction

Welcome again! Today I'll talk about XAML styling. How to make your XAML controls prettier and customized. If you search for “windows phone xaml style” then you'll get some helpful references. Styling XAML is not only for customizing your controls but also making code cleaner and easily readable. So let's get cracking in Windows Phone XAML Styling.

I'll just try to explain how to use XAML styling in you existing projects. I'm just going to modify my existing user control to show you the procedure. If you've read my Windows Phone Controls – Part 1 article, then you can understand the difference between previous and current XAML code. I'll not modify all the controls, but the “Popup Window”. I've used a “User Control”, I'll just modify that page.

Create a New Project and Add a User Control

First create a new project and add a new “User Control”. We've used these XAML code in our previous projects.

<Grid>
    <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
            <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
                <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
                    <StackPanel Orientation="Vertical" Height="200" Width="200" VerticalAlignment="Center">
                        <TextBlock Text="This is a Popup!" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,60,0,0"/>
                        <TextBlock Text="Hit the button again to hide me" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
                        <Button HorizontalAlignment="Center" Content="Close Popup" Click="ClosePopup" />
                    </StackPanel>
                </Border>
            </Border>
        </Border>
    </Border>
</Grid>

Listing 1

And the design looks like this.


                                                                              Figure 1

Now, we'll use XAML styling in the same XAML code and make it much cleaner and customized as well. To do so, you need to use resources as shown below.

<UserControl
...
    d:DesignWidth="400">

    <UserControl.Resources>
        ...
    </UserControl.Resources>

    <Grid>
        ...
    </Grid>
</UserControl>

Listing 2

Creating Styles

All you must do is put all your style properties inside the Resources tag. First of all we'll create a “Border Style” for our “Border” control.

<UserControl.Resources>
    <Style x:Key="BorderStyle" TargetType="Border">
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="CornerRadius" Value="0,10,0,10"/>
    </Style>
</UserControl.Resources>

Listing 3

Note: If you're using this in Blank of Basic pages, the code will be like this.

<Page.Resources>
    <Style x:Key="BorderStyle" TargetType="Border">
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="CornerRadius" Value="0,10,0,10"/>
    </Style>
</Page.Resources>

Listing 4

Since we're using a “User Control”, we used “UserControl.Resources”.

Here, we're considering only one the “Border” control. If you look at the preceding code, we gave the style name “BorderStyle” and set the target to “Border”. In whatever control you work with, you need to provide a unique name and set the target of that control. Also, we've set a property named “BorderThickness” and set the value to “2”, that will make the thickness of the border's outer edges. And we've also set “CornerRadious” to “0,10,0,10”, that will make the upper right and lower left corner edges a bit round.


                                                                     Figure 2

Now, similarly we've added “TextBox” and “Button” styles.

<UserControl.Resources>
    <Style x:Key="BorderStyle" TargetType="Border">
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="CornerRadius" Value="0,10,0,10"/>
    </Style>
    <Style x:Key="StackPanelStyle" TargetType="StackPanel">
        <Setter Property="Orientation" Value="Vertical"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Height" Value="200"/>
        <Setter Property="Width" Value="200"/>
    </Style>
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="Content" Value="Close Popup"/>
        <Setter Property="Background" Value="Green"/>
    </Style>
    <Style x:Key="TextBlockStyle" TargetType="TextBlock">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="Text" Value="This is a Popup!"/>
        <Setter Property="Margin" Value="0,60,0,0"/>
        <Setter Property="Foreground" Value="Red"/>
    </Style>
    <Style x:Key="TextBlockStyle1" TargetType="TextBlock">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Text" Value="Hit the button again to hide me."/>
        <Setter Property="Margin" Value="0,10,0,0"/>
        <Setter Property="Foreground" Value="Gray"/>
    </Style>
</UserControl.Resources>

Listing 5

If you have a look at the old XAML code, you can see all the properties are here exactly, except the “Button” click event. You must put this event in the main Grid's “Button” control code.

<Grid>
    <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
            Style="{StaticResource BorderStyle}">
        <StackPanel Style="{StaticResource StackPanelStyle}">
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle1}"/>
            <Button Style="{StaticResource ButtonStyle}" Click="ClosePopup" />
        </StackPanel>
    </Border>
</Grid>

Listing 6

All you need to do is just reference the styles in the corresponding controls. Like in the “Border” control we used “Style=”{StaticResource BorderStyle}”.. “. After the “StaticResource” name is the Style name.

Put Your Styles Separate

Another important thing you can do is to separate the XAML styling into a different location. To make a much cleaner XAML. To do so, just open “App.xaml” and put the same code there, like this:

<Application
...
    >
    <!--Application Resources-->
    <Application.Resources>
        <Style x:Key="BorderStyle" TargetType="Border">
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="CornerRadius" Value="5"/>
        </Style>
        <Style x:Key="StackPanelStyle" TargetType="StackPanel">
            <Setter Property="Orientation" Value="Vertical"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Height" Value="200"/>
            <Setter Property="Width" Value="200"/>
        </Style>
    </Application.Resources>
</Application>

Listing 7

The only difference is the tag. Here it should be “Application.Resources”, because it's in the “App.xaml” file. So, the tag structure should be like “Type.Resources”. Here the type can be “Page”, “Application”, “UserControl” and so on.

Now, in “Main Page.xaml” take a Button control to show the “Popup Window”.

<Page.Resources>
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Name" Value="PopupButton"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Width" Value="140"/>
        <Setter Property="Margin" Value="10,0,0,0"/>
        <Setter Property="Content" Value="Show Popup"/>
    </Style>
</Page.Resources>

<Grid>
    <Button Style="{StaticResource ButtonStyle}" Click="PopupButton_Click"/>
</Grid>

Listing 8

Code Behind

And the C# code of this “Button” event handler is given below.

private void PopupButton_Click(object sender, RoutedEventArgs e)
{
    if (!popup.IsOpen)
    {
        popup.Child = new PopupPanel();
        popup.VerticalOffset = 250.0;
        popup.HorizontalOffset = 100.0;
        popup.IsOpen = true;
    }
}

Popup popup = new Popup();

Listing 9

Running the Application

So, if you run the application it'll look like this.



Here, we've another sample with a round “Popup Window”. You can do that by simply changing the following code in “PopupPanel.xaml”.

<Page.Resources>
    <Style x:Key="BorderStyle" TargetType="Border">
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="CornerRadius" Value="100"/>
    </Style>
</Page.Resources>

Listing 10

Summary

I hope you've understood the basics of XAML styling. I'll be here with a new topic soon. Until then good bye. Have a nice day.

Happy coding!

Read the original article at http://bit.ly/1omk3Is.