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

Question

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

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

    </ListView>
</Page>

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

Answer 1

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

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

对于单个页面，我一直在页面中使用网格作为根容器并且效果很好：

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

    <Grid Background="White">

请注意，如果您想使用图像作为背景而不是颜色，则必须使用附加属性：

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

Answer 2

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

如果您查看文件 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>

或者，您可以为根 Grid 元素设置背景，这样可以提供更精细的控制。或者，您可以在页面的 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>

希望对您有所帮助。