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

Question

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

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

    </ListView>
</Page>

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

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

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

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

希望有帮助。