In this tutorial we are going to see how to apply a control with inbuilt theme resources so that each and every time change in the theme will affect the control automatically with out manually coding. In our previous articles we have seen how to detect the theme and how to change the theme accent colors programmatically, where we used some styles for the text blocks to change it automatically, the same thing applies here. We have a few set of inbuilt theme resources which are used to play around with the code to change the complete set of resources as per the theme changes.        [more]

Theme resources have a set of applicable properties that can be used across each of the controls and pages where we can have a unique design in place as and when the theme is changed by the end users. The properties available are as follows

• Brush Properties
• Color Resources
• Font Names
• Font Sizes
• Text Styles
• Thickness
• Theme Visibility
• Theme Opacity

We can get the complete details of each of the property and its internal needs using this MSDN link http://msdn.microsoft.com/en-us/library/ff769552%28v=vs.92%29#BKMK_BrushResources. Let us seen an example of how to use this styles in real time in application development with Windows Phone. Open Visual Studio 2010 and create a new Silverlight for Windows Phone application with a valid project name as shown in the screen below.

Now drag and drop few controls from the tool box, where we are going to impose the theme resources effectively to change as and when the theme is changed by the end user as shown in the screen below.

Now we will apply the theme resources for the Grid, text block and the Ellipse as shown in the code below. We can change it as per the requirement(check for the feasible MSDN options in the link provided above). Once we changed the theme resources our code will look like below.

Code:

<phone:PhoneApplicationPage
    x:Class="F5debugHowto42.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!–LayoutRoot is the root grid where all page content is placed–>
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!–TitlePanel contains the name of the application and page title–>
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Theme Resource" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="{StaticResource PhoneChromeBrush}">
            <TextBlock Height="71" FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                FontSize="{StaticResource PhoneFontSizeLarge}" HorizontalAlignment="Left" Margin="33,40,0,0"
                       Name="textBlock1" Text="F5debug WP 101 How to’s" VerticalAlignment="Top" Width="369" />
            <Ellipse Height="167" Stroke="{StaticResource PhoneForegroundBrush}" 
                     Fill="{StaticResource PhoneAccentBrush}"
                     HorizontalAlignment="Left" Margin="33,147,0,0" Name="ellipse1"
                     StrokeThickness="1" VerticalAlignment="Top" Width="369" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.

Output Screen:

Now change the theme or the theme accent color and we can see the changes in the application which changes the background, accent text color, brush color etc. as per the theme accent color selected as shown in the screen below(Theme Selected to Mango). To change the theme, click on the Window’s button and select settings, in that select themes and change the accent color.

So in this tutorial we have seen how to use the Theme resources to effectively develop a unique design across the pages and devices in windows phone application development. That’s it from this tutorial we will see you next with a fresh tutorial on a interesting topic, until then bye bye and happy programming!!!