如何在metro应用程序中设置页面背景

时间:2012-08-11 19:53:00

标签: xaml windows-8 microsoft-metro winrt-xaml

我有奇怪的问题。我无法在metro应用中为我的页面设置背景。 下面是我的xaml结构的简单视图

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

    </ListView>
</Page>

问题是页面的背景是黑色的。所以我在黑色背景上设置了红色矩形(ListView区域)。我希望我的页面是白色的。我看到几个例子,似乎我做得很好。我也试过刷子,但结果相同。

2 个答案:

答案 0 :(得分:6)

如果您希望自己的应用在所有网页上都有白色背景,那么实现此目的的最简单方法是在App.xaml文件中设置Light上的 RequestedTheme 。这不仅可以为您提供白色背景,而且还会自动更改所有其他颜色,例如前景色(对于文本等)默认为黑色。

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

对于单个页面,我总是在页面中使用网格作为rootcontainer并且工作正常:

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

    <Grid Background="White">

请注意,如果您想将图片用作背景而不是颜色,则必须使用附加属性:

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

答案 1 :(得分:4)

我认为您遇到的问题是页面的默认样式会覆盖您设置背景颜色的尝试。

如果查看StandardStyles.xaml文件,它包含一个LayoutRootStyle(位于文件的最后)。如果您将值从默认值更改为十六进制颜色值(例如,#FFFF0000将为您提供红色),则应用程序的背景将相应更改。这是一种简单的方法,可以做你想要的,但可能不是最好的做法。

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

或者,您可以设置根网格元素的背景,这将为您提供更精细的控制。或者,您可以创建一个自定义样式,在页面的Page.Resources部分中覆盖LayoutRootStyle,方法是将规则复制到该部分,然后修改背景设置器的值。

这是它应该是什么样子:

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

希望有所帮助。