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
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: