Question

我正在开发一个Windows 8“Metro”应用程序。在这个应用程序中，我想将图像作为壁纸。图像是1600x900像素大。现在，当我在模拟器中尝试更大的屏幕时，图像没有缩放以填满整个屏幕。我怎样才能实现这一目标？我试图跟随微软不同屏幕尺寸的指南，例如将图像放在画布中，但它没有工作。有人能帮助我吗？

非常感谢

Answer 1

在我的一个应用中，我使用全屏图像作为背景水印，使用以下CSS：

.watermark {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 140%;
    opacity: 0.05;
}

然后，在标记中，我只需添加一个带有水印类的图像标记：

<img class="watermark" src="#" />

就我而言，我在页面的JS文件中动态设置图像源，如下所示：

element.querySelector(".watermark").src = item.maptileUrl;

以上行从传递给页面的所选项目中获取图像的URL（地图图块）。

我在模拟器中测试了我的应用程序，无论屏幕尺寸和分辨率如何，它都能正常工作。

请注意，根据图像的不同，使用100％的宽度/高度可能会导致图像垂直或水平拉伸。

另一个可能更简单的解决方案是简单地将body标签的背景图像样式设置为所需的图像。您可以在http://www.w3schools.com/cssref/pr_background-image.asp（以及背景重复，背景大小等）阅读有关此属性的更多信息。

Answer 2

我不确定您尝试了什么，或者您正在查看哪些指南。但您可以像这样在网格中添加ImageBrush。

<Page
    x:Class="App3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Assets/img101.jpg"/>
        </Grid.Background>
        <TextBlock Name="txt1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Hello World" FontFamily="Arial" FontSize="60" ></TextBlock>
    </Grid>
</Page>

地铁windows 8应用程序中的全屏图像

2 个答案: