How to set page background in metro application

Question

I have strange problem. I can't set background for my page in metro app. Below is a simple view of my xaml structure

<Page Background="White">
    <ListView Background="Red">

    </ListView>
</Page>

The problem is that the background of the page is black. So I have red rectangle (ListView area) set on black background. I want my page to be white. I saw few examples and it seems that I did good. I've also tried with brushes but same result.

Answer 1

If you want your app to have a white background on all pages, then the easiest way to achieve this is to set the RequestedTheme on Light in the App.xaml file. This will not only give you a white background, but it will automatically change all other colors too, like the foreground color (for text etc.) will be black by default.

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             ...
             RequestedTheme="Light">

For a single page I've always used a grid as rootcontainer in a page and that worked fine:

<common:LayoutAwarePage
    x:Name="pageRoot"
    ... 
    >

    <Grid Background="White">

Note that if you want to use an image as background instead of a color, you'll have to work with attached properties:

<Grid>
    <Grid.Background>
        <ImageBrush x:Name="backgroundGrid" ImageSource="/Assets/Paper.jpg" />
    </Grid.Background>

Answer 2

I think the issue you're running into is that the default style for the page is overriding your attempt to set the background color.

If you look at the file StandardStyles.xaml, it includes a LayoutRootStyle (at the very end of the file). If you change the Value from the default to a hex color value (for example, #FFFF0000 would give you red), the background of the app will be changed correspondingly. This is a simple way to do what you want, but may not be a best practice.

<Style x:Key="LayoutRootStyle" TargetType="Panel">
    <Setter Property="Background" Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/>
    <Setter Property="ChildrenTransitions">
        <Setter.Value>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Setter.Value>
    </Setter>
</Style>

Alternatively, you could set the background for the root Grid element, which would give you more granular control. Or you could create a custom style that overrides LayoutRootStyle in your page's Page.Resources section, by copying the rule into that section, and then modifying the Value of the Background setter.

Here's what it should look like:

<Page.Resources>
    <Style x:Key="LayoutRootStyle" TargetType="Panel">
        <Setter Property="Background" Value="#FFFF0000"/>
        <Setter Property="ChildrenTransitions">
            <Setter.Value>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

Hope that helps.