How to: Play with Theme Accent Color in Windows Phone

In this tutorial we are going to learn how to programmatically change the Theme Accent color in Windows Phone device. In our previous article we have seen how programmatically detect the theme running in the background (). This article is an extension of the previous article where we are going to programmatically detect the accent color and apply it to a control. Accent colors are the background colors that can be selected from a list of available resources that best suits the device as per the convenience.

Accent color with themes just change the Font color and it will not affect the Font size or control sizes. There are different Accent colors available at present for Windows Phone and it Keeps increasing on each and every updates which Microsoft provides as shown in the list below. Windows Phone is provided with 10 different colors selection and by default 1 for the manufacturer company can select on his own. So totally 11 Accent colors will be available to select. 

Let us see how we can implement the Accent color changes in Windows Phone programmatically, Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 project with a valid project name as shown in the screen below.

Now drag and drop few controls that are used to show the output on the accent color changes, since we cant impose this on a control directly we will use the text box to show the output. So drag and drop 3 text blocks with some dummy values as shown in the screen below.

XAML Code:

<phone:PhoneApplicationPage
    x:Class="F5debugHowto41.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="Accent Colors" 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">
            <TextBlock Height="40" Style="{StaticResource PhoneTextAccentStyle}" HorizontalAlignment="Left" Margin="37,44,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" Width="382" />
            <TextBlock Height="40" HorizontalAlignment="Left" Margin="37,110,0,0" Name="textBlock2" Text="" VerticalAlignment="Top" Width="382" />
            <TextBlock Height="40" Style="{StaticResource PhoneTextAccentStyle}" HorizontalAlignment="Left" Margin="37,176,0,0" Name="textBlock3" Text="" VerticalAlignment="Top" Width="382" />
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

In the above XAML code we can see the textblock1 and textblock3 is provided with the style pointing to the PhonetextAccentStyle which indicates it gets the style based on the accent color selected from the settings. Now in the code behind add the below code which gets some data based on the selection, basically the hexcolor of the selected accent as shown below.

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace F5debugHowto41
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            Color currentAccentColorHex = (Color)Application.Current.Resources["PhoneAccentColor"];

            string strHexa = currentAccentColorHex.ToString();
            string strRGB = currentAccentColorHex.R.ToString() + ";" + currentAccentColorHex.G.ToString() +";" + currentAccentColorHex.B.ToString();

            textBlock1.Text = "Accent Color Hex – " + strHexa;
            textBlock2.Text = "Accent Apha Channel" + currentAccentColorHex.A.ToString();
            textBlock3.Text = "Accent Color RGB – " + strRGB;
        }
    }
}

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:

We can see the textbox1 and textbox3 is affected as per the accent color, but textbox2 is not affected as this has not been provided with the theme style, now change the theme accent color by going to settings and we can see the changed affected to the textbox1 and textbox3 alone as shown in the screen below.

That’s it from this tutorial, so here we have seen how to play around with the Accent colors and how to style the project which can use the device theme effectively to provide a unique design for the Windows phone application development. See you all in the next tutorial until then bye bye and Happy Programming!!