学步园

你可以向应用添加图像和其他文件资源，并从应用内引用这些文件。 如果按照以下在文件夹中命名和组织文件资源的说明操作，则内置了对基于高对比度设置或显示缩放来交换图像的支持。

说明

1. 为不同比例 (dpi) 和对比度设置创建定制的图像或其他文件资产。

   创建多个具有推荐大小的图像，确保你的应用在 Windows 进行缩放时具有良好的外观。请参阅按比例缩放像素密度指南。

   1. 为每个图像创建多个副本：

      1. 典型 96dpi 设备的原始大小。
      2. 原始大小的 140%。例如，100x100px 图像还应该具有一个 140x140px 图像版本。
      3. 原始大小的 180%。例如，100x100px 图像还应该具有一个 180x180px 图像版本。
      4. 对于在应用程序清单文件中指定的徽标、宽徽标和小徽标资源，采用原始大小的 80%。例如，100x100px 图像还应该具有一个 80x80px 图像版本。请参阅应用图像和磁贴图像大小。
      5. 具有黑色背景和白色前景的原始大小高对比度图像。
      6. 具有白色背景和黑色前景的原始大小高对比度图像。

   2. 使用针对各种比例和对比度设置的限定符来命名图像：

      1. name.scale-100.ext
      2. name.scale-140.ext
      3. name.scale-180.ext
      4. name.scale-80.ext（适用于徽标、宽徽标和小徽标资源）
      5. name.scale-100_contrast-black.ext
      6. name.scale-100_contrast-white.ext

      在此示例中，name.ext 是代码和标记中引用的图像名称。

   3. 将图像并排放在同一个文件夹中。例如：

      1. images/logo.scale-100.png
      2. images/logo.scale-140.png
      3. images/logo.scale-180.png
      4. images/logo.scale-80.png
      5. images/logo.scale-100_contrast-black.png
      6. images/logo.scale-100_contrast-white.png
2. 在 XAML 中不使用限定符引用图像。
   XAML

   <Image Source="images/logo.png" />
   
   

3. 在代码中不使用限定符引用图像。
   C#

   var uri = new System.Uri("ms-appx:///images/logo.png");
   var file = Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(uri);
   
   

4. 在清单中不使用限定符引用图像。
   1. 在 Microsoft Visual Studio 中打开 Package.appxmanifest 文件。
   2. 编辑清单引用，在正确的元素或属性中引用该文件，例如：
      text

      Logo:	images\logo.png
      
      

可能需要本地化一些图像或其他文件，特别是在它们包含文本或文化敏感的材料时。如果用户所在地点的语言与其所用的语言不同，文件也可能不同。例如，根据用户的位置，地图可能具有不同的边界，但标签应该与用户的首选语言保持一致。

可使用针对不同用户和设备配置的基本文件夹和文件命名约定来标记或限定各种文件。请参阅如何使用限定符命名资源，了解限定资源的详细信息和一组限定符。

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Windows 对你的应用进行缩放，确保无论设备的像素密度如何，UI 元素的物理尺寸都保持一致。本主题概述如何构建在缩放时保持布局和图像的外观良好的应用。

缩放的用户体验指南

如果没有缩放，当显示设备的像素密度增加时，屏幕上对象的物理尺寸会缩小。当 UI 太小而无法操作以及当文本太小而无法阅读时，Windows 会将系统和应用 UI 缩放到一个缩放百分比：

• 不应用缩放时为 100%
• 140%，适用于最低 DPI 为 174 的 1920 x 1080 设备
• 180%，适用于最低 DPI 为 240 的 2560 x 1440 设备

注意  对于清单中指定的徽标和 WideLogo 图像，可以指定其他 80% 缩放百分比。若要获得最佳结果，请提供这些图像的四个缩放。

你无须对应用执行任何操作即可达到缩放效果，但是你需要遵循本主题中指南，才能确保应用在缩放时达到良好的外观效果。

Option #1 - File naming convention:
...\test.scale-100.jpg
   \test.scale-140.jpg
   \test.scale-180.jpg

Option #2 - Folder naming convention:
...\scale-100\test.jpg
   \scale-140\test.jpg
   \scale-180\test.jpg

<Image Grid.Row="0" Grid.Column="1" x:Name="testImage" Source="test.jpg" Margin="2,2,2,2"/>

/* CSS - Load a remote image depending on the scale percentage */
@media all and (max-resolution: 134dpi){
    /* Load 100% image when scaled by 100% */
    .imageBackground {
        background-image: url('http://www.fabrikam.com/foo.png?s=100');
    }
}
@media all and (min-resolution: 135dpi) {
    /* Load 140% image when scaled by 140% */
    .imageBackground {
        background-image: url('http://www.fabrikam.com/foo.png?s=140');
    }
}
@media all and (min-resolution: 174dpi) {
    /* Load 180% image when scaled by 180% */
    .imageBackground {
        background-image: url('http://www.fabrikam.com/foo.png?s=180');
    }
}

<Image Grid.Row="0" Grid.Column="2" x:Name="testRemoteWebImage" Margin="2,2,2,2"/>

// Manually load different versions of the image based on the scaling factors. 
void LoadRemoteWebImage()
{
    switch (DisplayProperties.ResolutionScale)
    {
        case ResolutionScale.Scale100Percent:
            testRemoteWebImage.Source = new BitmapImage(new Uri(testRemoteWebImage.BaseUri, 
                    "http://www.fabrikam.com/foo.png?s=100"));
            break;
        case ResolutionScale.Scale140Percent:
            testRemoteWebImage.Source = new BitmapImage(new Uri(testRemoteWebImage.BaseUri, 
                    "http://www.fabrikam.com/foo.png?s=140 "));
            break;
        case ResolutionScale.Scale180Percent:
            testRemoteWebImage.Source = new BitmapImage(new Uri(testRemoteWebImage.BaseUri, 
                    "http://www.fabrikam.com/foo.png?s=180 "));
            break;
        default:
            throw new Exception("Unknown Scaling Factor");
    } 
}

开发人员应避免出现以下情况。