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:

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:

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:

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).