Geek Answers Handbook

How to set page background in metro application

I have a strange problem. I can not set the background for my page in the metro application. 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 a red rectangle (ListView area) set against a black background. I want my page to be white. I have seen several examples, and it seems that I have done good. I also tried using brushes, but the same result.

+4
source share
2 answers

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

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

For one page, I always used the grid as rootcontainer on the page and worked fine:

 <common:LayoutAwarePage x:Name="pageRoot" ... > <Grid Background="White">

Note that if you want to use the image as a background instead of color, you will have to work with related properties:

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

I think the problem you are facing is that the default page style overrides your attempt to set the background color.

If you look at the StandardStyles.xaml file, it includes LayoutRootStyle (at the very end of the file). If you change the default value to a hex color value (for example, # FFFF0000 will give you a red color), the application background will be changed accordingly. This is an easy way to do what you want, but it may not be 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 can set the background for the Grid root element, which will give you more detailed control. Or you can create your own style that overrides LayoutRootStyle in the page section of the .Resources page by copying the rule into this section and then changing the value of the Set Background parameter.

Here's how it should look:

 <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 this helps.

+4
source

More articles:


All Articles