Post
Ask Question

Universal Windows Platform - XAML Styling

Introduction

Welcome again! Today I’ll talk about XAML styling. How you can make your XAML controls more beautiful and customized. If you search “Universal Windows Platform XAML style” you’ll get some helpful references. Styling XAML is not only for customizing your controls but also make code much clean and easily readable. So, let’s get crack in Windows Phone XAML Styling.

I’ll just try to explain how you can use XAML styling in you existent 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 have used a “User Control”, I’ll just modify that page.

Creating a New Project and Add a User Control

Firstly, take a new Project and add a new “User Control”. We’ve used these XAML code in our previous project.

  1. <Grid>  
  2.     <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
  3.         <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">  
  4.             <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">  
  5.                 <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">  
  6.                     <StackPanel Orientation="Vertical" Height="200" Width="200" VerticalAlignment="Center">  
  7.                         <TextBlock Text="This is a Popup!" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,60,0,0"/>  
  8.                         <TextBlock Text="Hit the button again to hide me" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" TextWrapping="Wrap" TextAlignment="Center"/>  
  9.                         <Button HorizontalAlignment="Center" Content="Close Popup" Click="ClosePopup" />  
  10.                     </StackPanel>  
  11.                 </Border>  
  12.             </Border>  
  13.         </Border>  
  14.     </Border>  
  15. </Grid>  
                                                                  Listing 1

And the design looks like the following screenshot:

design
                                                      Figure 1

Now, we’ll use XAML styling in the same XAML code and make it much clean and customized as well. To do so, you’ve to put resources as in the following code:
  1. <UserControl  
  2. ...  
  3.     d:DesignWidth="400">  
  4.   
  5.     <UserControl.Resources>  
  6.         ...  
  7.     </UserControl.Resources>  
  8.   
  9.     <Grid>  
  10.         ...  
  11.     </Grid>  
  12. </UserControl>  
                                                                        Listing 2
Creating Styles

All you have to do is put all your style properties inside the Resources tag. Firstly, we’ll create a “Border Style” for our “Border” control.
  1. <UserControl.Resources>  
  2.     <Style x:Key="BorderStyle" TargetType="Border">  
  3.         <Setter Property="BorderThickness" Value="2"/>  
  4.         <Setter Property="CornerRadius" Value="0,10,0,10"/>  
  5.     </Style>  
  6. </UserControl.Resources>  
                                                                 Listing 3

Note: If you’re using this in Blank of Basic pages, the code will be like the following:
  1. <Page.Resources>  
  2.     <Style x:Key="BorderStyle" TargetType="Border">  
  3.         <Setter Property="BorderThickness" Value="2"/>  
  4.         <Setter Property="CornerRadius" Value="0,10,0,10"/>  
  5.     </Style>  
  6. </Page.Resources>  
                                                                   Listing 4

As we’re using a “User Control”, so we used “UserControl.Resources”.

Here, we’re considering only one “Border” control. If you look in the above code, we gave the style name “BorderStyle” and target set to “Border”. In which control you work you have to give a unique name and set target of that control. Also, we have set a property name “BorderThickness” and set value to “2”, which will make the thickness of the borders outer edges. And we have also set “CornerRadious” to “0,10,0,10”, which will make the upper right and lower left corner edges little bit round.

popup
                                                   Figure 2

Now, similarly we have added “TextBox” and “Button” styles.
  1. <UserControl.Resources>  
  2.     <Style x:Key="BorderStyle" TargetType="Border">  
  3.         <Setter Property="BorderThickness" Value="2"/>  
  4.         <Setter Property="CornerRadius" Value="0,10,0,10"/>  
  5.     </Style>  
  6.     <Style x:Key="StackPanelStyle" TargetType="StackPanel">  
  7.         <Setter Property="Orientation" Value="Vertical"/>  
  8.         <Setter Property="VerticalAlignment" Value="Center"/>  
  9.         <Setter Property="Height" Value="200"/>  
  10.         <Setter Property="Width" Value="200"/>  
  11.     </Style>  
  12.     <Style x:Key="ButtonStyle" TargetType="Button">  
  13.         <Setter Property="HorizontalAlignment" Value="Center"/>  
  14.         <Setter Property="Content" Value="Close Popup"/>  
  15.         <Setter Property="Background" Value="Green"/>  
  16.     </Style>  
  17.     <Style x:Key="TextBlockStyle" TargetType="TextBlock">  
  18.         <Setter Property="VerticalAlignment" Value="Center"/>  
  19.         <Setter Property="HorizontalAlignment" Value="Center"/>  
  20.         <Setter Property="Text" Value="This is a Popup!"/>  
  21.         <Setter Property="Margin" Value="0,60,0,0"/>  
  22.         <Setter Property="Foreground" Value="Red"/>  
  23.     </Style>  
  24.     <Style x:Key="TextBlockStyle1" TargetType="TextBlock">  
  25.         <Setter Property="VerticalAlignment" Value="Center"/>  
  26.         <Setter Property="HorizontalAlignment" Value="Center"/>  
  27.         <Setter Property="TextAlignment" Value="Center"/>  
  28.         <Setter Property="TextWrapping" Value="Wrap"/>  
  29.         <Setter Property="Text" Value="Hit the button again to hide me."/>  
  30.         <Setter Property="Margin" Value="0,10,0,0"/>  
  31.         <Setter Property="Foreground" Value="Gray"/>  
  32.     </Style>  
  33. </UserControl.Resources>  
                                                Listing 5

If you take a look at the old XAML code, you can see all the properties are here exactly, but with an exception in “Button” click event. You have to put this event in the main Grid’s “Button” control code.
  1. <Grid>  
  2.     <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"  
  3.             Background="{StaticResource ApplicationPageBackgroundThemeBrush}"  
  4.             Style="{StaticResource BorderStyle}">  
  5.         <StackPanel Style="{StaticResource StackPanelStyle}">  
  6.             <TextBlock Style="{StaticResource TextBlockStyle}"/>  
  7.             <TextBlock Style="{StaticResource TextBlockStyle1}"/>  
  8.             <Button Style="{StaticResource ButtonStyle}" Click="ClosePopup" />  
  9.         </StackPanel>  
  10.     </Border>  
  11. </Grid>  
                                             Listing 6

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

Put Your Styles Separate

Another important thing you can do is to separate the XAML styling into different location. To make much clean XAML, just open “App.xaml” and put the same code there, like this
  1. <Application  
  2. ...  
  3.     >  
  4.     <!--Application Resources-->  
  5.     <Application.Resources>  
  6.         <Style x:Key="BorderStyle" TargetType="Border">  
  7.             <Setter Property="BorderThickness" Value="2"/>  
  8.             <Setter Property="CornerRadius" Value="5"/>  
  9.         </Style>  
  10.         <Style x:Key="StackPanelStyle" TargetType="StackPanel">  
  11.             <Setter Property="Orientation" Value="Vertical"/>  
  12.             <Setter Property="VerticalAlignment" Value="Center"/>  
  13.             <Setter Property="Height" Value="200"/>  
  14.             <Setter Property="Width" Value="200"/>  
  15.         </Style>  
  16.     </Application.Resources>  
  17. </Application>  
                                                      Listing 7

Only difference is the tag, here it should be “Application.Resources”, because it’s in “App.xaml” file. So, the tag structure should be like “Type.Resources”. Here type can be “Page”, “Application”, “UserControl” etc.

Now, in “Main Page.xaml” take Button control to show the “Popup Window”.
  1. <Page.Resources>  
  2.     <Style x:Key="ButtonStyle" TargetType="Button">  
  3.         <Setter Property="Name" Value="PopupButton"/>  
  4.         <Setter Property="HorizontalAlignment" Value="Left"/>  
  5.         <Setter Property="VerticalAlignment" Value="Top"/>  
  6.         <Setter Property="Width" Value="140"/>  
  7.         <Setter Property="Margin" Value="10,0,0,0"/>  
  8.         <Setter Property="Content" Value="Show Popup"/>  
  9.     </Style>  
  10. </Page.Resources>  
  11.   
  12. <Grid>  
  13.     <Button Style="{StaticResource ButtonStyle}" Click="PopupButton_Click"/>  
  14. </Grid>  
                                                                        Listing 8

Code Behind

And C# code of this “Button” event handler is given below.
  1. private void PopupButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     if (!popup.IsOpen)  
  4.     {  
  5.         popup.Child = new PopupPanel();  
  6.         popup.VerticalOffset = 200.0;  
  7.         popup.HorizontalOffset = 160.0;  
  8.         popup.IsOpen = true;  
  9.     }  
  10. }  
  11.    
  12. Popup popup = new Popup();  
                                                                        Listing 9

Running the Application

So, if you run the application it’ll look like the following:

Windows Phone Emulator:

Windows Phone Emulator

Windows 10 Local Machine:

Windows 10 Local Machine

Here, we’ve another sample in which “Popup Window” is round. You can simply do that just changing this code in “PopupPanel.xaml”
  1. <Page.Resources>  
  2.     <Style x:Key="BorderStyle" TargetType="Border">  
  3.         <Setter Property="BorderThickness" Value="2"/>  
  4.         <Setter Property="CornerRadius" Value="100"/>  
  5.     </Style>  
  6. </Page.Resources>  
                                                                        Listing 10

Summary

Hope, you have understood the basics of XAML styling. I’ll be here with a new topic soon. Till then good bye. Have a nice day.

Download the full source code. 


Similar Articles