Wednesday 17 October 2012

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:

transparent

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:


opaque


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:


semitransparent

No comments:

Post a Comment