Windows 8 Selected Item Styles in a GridView control

While building our latest app, Travel Advisories I noticed that our selected items didn’t look a lot like the selected items elsewhere on Modern UI Style Apps.

My app was generating selections that looked like this:

The selection box has the tick, but it isn’t an outline, and it’s completely filled with the color.

Eventually, I worked out that this was caused by my xaml for the ItemTemplate

<GridView.ItemTemplate>
  <DataTemplate>
    <Grid   Width="400" Margin="3" HorizontalAlignment="Left" >
        <TextBlock Margin ="20,0,0,0" FontSize="32" 
          HorizontalAlignment="Left" VerticalAlignment="Top" 
          Text="{Binding Country}" />
    </Grid>
  </DataTemplate>
</GridView.ItemTemplate>

You’ll note that we don’t set any background and leave it transparent.  Having looked at some sample code, I found that most of the samples were setting a background color for the ItemTemplates, so changing the background of the grid to Black makes it look like this:

Now you can see that we have a completely black background, and the corner marked with the tick, much like the other samples.  But that still isn’t the look I was after.  What I wanted was a totally transparent background showing the background behind the text.

To accomplish that requires delving into the default ItemContainerStyle and a trip into blend to do it, so do the following

• Open the project in blend


• Right Click on your GridView in the Objects Window


• Expand Edit Additional Templates


• Expand Edit Generated Item Container


• Select Edit a copy, and edit the 290 additional lines of code

The one line of code your looking for looks like this

<Rectangle x:Name="SelectionBackground" Fill="Transparent" Margin="4" Opacity="0"/>

Where the Fill is set to a StaticResource Binding.

Having made that change, we now get the desired result: