【问题标题】:How to set page background in metro application如何在 Metro 应用程序中设置页面背景
【发布时间】:2012-08-11 19:53:00
【问题描述】:

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

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

    </ListView>
</Page>

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

【问题讨论】:

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


    【解决方案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>
    

    【讨论】:

    • 谢谢。但是由 VS 创建的模板没有 标签它有 我测试了不同的组合,但我仍然无法更改背景。您需要我提供更多代码吗?
    • 好的,我找到了解决方案。我创建了 GRID,它是在全高和全宽上拉伸的主要根元素。我已经为那个网格设置了背景,它工作正常
    • 应用标签放在App.xaml中
    【解决方案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>
    

    希望对您有所帮助。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多