Windows Phone 8 Dev – Creating A Basic Color Swatch

In this post I am going to go over how to quickly create a color swatch in Windows Phone 8. This particular app shows the colors for the Windows Phone 8 themes and their hexadecimal and RGB values.

English – US

Store Logo

This is our to-do list:

• create a basic grid with rows and columns
• define a style for the rectangles inside the grid
• define a style for the text
• force the app to use the light theme (optional)

The Windows Phone 8 themes consist of 20 colors:

So I decided on a grid of 3 columns and 7 rows:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

As you can see, in MainPage.xaml, we have a Grid and three ColumnDefinitions with a “*” for the width. This means that each column gets one third of the width of the screen. I also have 7 RowDefinitions whose height is set to “Auto“. This means that they adjust their size according to their content.

We want our content to scroll up and down so we need to add a ScrollViewer:

<ScrollViewer VerticalScrollBarVisibility="Auto">

So now we have a grid that can scroll up and down and we need to start putting content into each cell of the grid. Before we do that it pays to think about the properties of our content – we don’t want to manually specify each property in every grid right?

In App.xaml we can set properties under <Application.Resources> as follows. Let’s start with the text properties first:

<Application.Resources>
        <local:LocalizedStrings xmlns:local="clr-namespace:HexColor" x:Key="LocalizedStrings"/>

        <!--Text Style for Grid-->
        <Style x:Key="GridCellStyle"
               TargetType="TextBlock">
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="TextAlignment"
                    Value="Center" />
            <Setter Property="Foreground"
                    Value="White" />
            <Setter Property="FontWeight"
                    Value="SemiBold" />
        </Style>

Here I have named my text style GridCellStyle and the TargetType is set to TextBlock. I have Setters for Horizontal and Vertical Alignment, Text Alignment, Foreground (color) and Font Weight.

To call on these properties use <StackPanel.Resources> in your MainPage.xaml like this:

<StackPanel>
<StackPanel.Resources>
                <Style BasedOn="{StaticResource GridCellStyle}"
                       TargetType="TextBlock" />
                <Style BasedOn="{StaticResource RectangleStyle}"
                       TargetType="Rectangle" />
            </StackPanel.Resources>
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid> ...

As you can see we have our style based on GridCellStyle with TartgetType set as TextBlock– so all of the text we set will have the properties that we defined in App.xaml.

Similarly you can see that I also have a RectangleStyle with a TargetType set as Rectangle. This style has properties for the Width, Height and Margin of the rectangles that I am going to draw in the grid. Here are the rectangle style settings from App.xaml:

        <Style x:Key="RectangleStyle"
               TargetType="Rectangle">
            <Setter Property="Width"
                    Value="125" />
            <Setter Property="Height"
                    Value="125" />
            <Setter Property="Margin"
                    Value="10" />
        </Style>

Now that we have our grid defined and our properties set up we can populate the grid cells. Starting with the rectangles we just need to define the colors and their position in the grid:

                    <!--Lime-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="0"
                               Fill="#FFA4C400" />

                    <!--Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="1"
                               Fill="#FF60A917" />

                    <!--Dark Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="2"
                               Fill="#FF008A00" />

These are the first three rectangles that I defined – as you can see all I need to set in their position in the grid using Grid.Row and Grid.Column and the Fill color (in hexadecimal). You can just type the color name instead of the hexadecimal value if that meets your needs.

Again with the text for each grid cell I am just defining the grid position and the actual text to display:

<TextBlock Text="Lime
#A4C400
RGB
(164,196,0)"
            Grid.Row="0"
            Grid.Column="0" />
<TextBlock Text="Green
#60A917
RGB
(96,169,23)"
            Grid.Row="0"
            Grid.Column="1" />
<TextBlock Text="Dark Green
#008A00
RGB
(0,138,0)"
            Grid.Row="0"
            Grid.Column="2" />

The last item on my list is to force the use of the light theme. I did this because I think a color swatch looks best that way – but there are some caveats. For phones with AMOLED or similar screens this will impact battery life (if the app is used a lot).

To force the light theme I am using Jeff Wilcox Phone Theme Manager. To install it click Tools > NuGet Package Manager > Package Manager Console. Run the command below:

Install-Package PhoneThemeManager

Now simply add the following to App.xaml.cs:

//Set theme to Light
ThemeManager.ToLightTheme();

That’s everything on our list done and even though it’s very simple I think that it looks good.

If this swatch is of use to you it is available in the Windows Phone Store here.

Sources:

http://www.jeff.wilcox.name/2012/01/phonethememanager/

http://www.creepyed.com/2012/11/windows-phone-8-theme-colors-hex-rgb/