Question

I have a problem understanding one style definition in Windows 8 metro apps.

When you create a metro style application with VS, there is also a folder named

Common

created. Inside this folder there is file called

StandardStyles.xaml

Now the following snippet is from this file:

<!-- Grid-appropriate 250 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
            <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>

What I do not understand here is the static resource definition, e.g. for the Border

Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"

It is not about how you work with templates and binding and resources.

Where is this ListViewItemPlaceholderBackgroundThemeBrush located?

Many thanks for your help.

Dimi

Answer 1

This is one of those incredibly frustrating things that should be in Microsoft’s documentation, but isn’t (yet).

ListViewItemPlaceholderBackgroundThemeBrush is one of the System Brush Resources. It’s defined by the Metro “Light” or “Dark” theme (whichever you selected for your app).

You can see the full list of system brushes in Blend. (Unfortunately, I haven’t found any way to enumerate them in code. There doesn’t seem to be any programmatic way to inspect the theme resources.)

Here are some steps that will get you to the full list. (Of course, you can abbreviate the steps if you’re already familiar with Blend.)

1. Open Expression Blend.
2. Create a new project, and select XAML (Windows Metro style) > Blank App (XAML) and click OK.
3. Click in the design surface to select the Grid. (In the “Objects and timeline” docked window in the lower-left, the “[Grid]” line will become highlighted.)
4. In the Properties docked window in the upper right, find the “Brush” category.
5. Right below where it says “Background: No brush”, there’s a row of five buttons. Click the rightmost button (“Brush resources”).

The list of system brush resources will appear in the listbox.