1

我正在开发一个 Windows 8“地铁”应用程序。在这个应用程序中，我想将图像作为壁纸。图像为 1600x900 像素大。现在，当我在模拟器中尝试更大的屏幕时，图像不会缩放以填充整个屏幕。我怎样才能做到这一点？我尝试遵循不同屏幕尺寸的 Microsoft 指南，例如将图像放在画布中，但它不起作用。有人能帮我吗？

非常感谢你

4

2 回答 2

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阅读更多关于此属性的信息（以及背景重复、背景大小等）。

于 2012-10-03T01:29:41.307 回答
1

我不确定您到底尝试了什么，或者您正在查看哪些指南。但是你总是可以ImageBrush像这样向你的 Grid 添加一个。

<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>
于 2012-10-03T03:46:44.397 回答