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

Question

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

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

    </ListView>
</Page>

问题在于页面的背景是黑色的。因此，我将红色矩形（ListView区域）设置在黑色背景上。我希望我的页面是白色的。我看过一些示例，似乎我做得不错。我也尝试使用画刷，但结果相同。

- Fixus

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>

- Bart

---

谢谢。但是由VS创建的模板没有<application>标签，而是<page>标签。我尝试了不同的组合，但仍然无法更改背景。你需要我提供更多的代码吗？ - Fixus

好的，我找到了解决方案。我创建了一个GRID，它是主根元素，可以在整个高度和宽度上进行拉伸。我为该网格设置了背景，它可以正常工作。 - Fixus

应用程序标签位于App.xaml文件中。 - Bart

Answer 2

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

如果你查看StandardStyles.xaml文件，它包含一个LayoutRootStyle(在文件末尾)。如果你将Value从默认值更改为十六进制颜色值(例如，#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，将规则复制到该部分，然后修改背景setter的值。

下面是示例：

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

希望这能有所帮助。

- devhammer

---

它不起作用。我在样式XAML中进行了更改并添加到页面XAML中，但它不起作用:/ 不知道为什么。 - Fixus

找到了解决方案。在上一个回答的评论中进行了描述。 - Fixus

参考链接，XAML主题的描述和下载地址为https://msdn.microsoft.com/zh-cn/library/windows/apps/dn518235.aspx。 - Drew Noakes