如何在 uwp 应用程序上正确启用 dpi 缩放 [英] How to properly enable dpi-scaling on uwp app

问题描述

我已经创建了我的第一个 UWP 应用.这是一个 Windows 8.1 UWP 应用程序，它将帮助我在当前系统糟糕的大学安排课程.我一直在使用带有 1080p 显示器的 Windows 10 台式计算机在默认系统缩放 (100%) 下进行处理.我部署了一个测试版本并将其安装在我的笔记本电脑上.笔记本电脑也是 Windows 10 和 1080p，但屏幕较小，因此我将系统缩放设置为 125%.我的问题是，这个更高的缩放因子不是让我的应用程序具有更大的功能，而是相反并缩小了应用程序中的所有内容.

I've created my first UWP app. It's a Windows 8.1 UWP app which will help with scheduling courses at my university who's current system is awful. I've been working on it with my Windows 10 desktop computer with a 1080p monitor at default system scaling (100%). I deployed a test build and installed it on my laptop. The laptop is also Windows 10 and 1080p but has a smaller screen so I have system scaling set to 125%. My problem is that instead of this higher scaling factor making my app have bigger features, it does the opposite and shrinks everything in the app.

以下是我的笔记本电脑以不同比例因子运行时的两张屏幕截图.第一个是 100%，系统上的所有内容都太小.

Here are two screenshots from my laptop when running at different scaling factors. The first is at 100% where everything on the system is too small.

请注意，左侧导航栏的宽度为 44 像素，符合设计要求.现在在下一个屏幕截图中，笔记本电脑以 125% 的系统缩放比例运行(我在截取屏幕截图之前注销并登录，因此缩放比例应该完全更新).我们应该期望导航栏的宽度为 55 像素.

Note that the navigation bar on the left is exactly 44 pixels wide, as design. Now in the next screenshot the laptop is running at 125% system scaling (I logged out and in before taking the screenshot so scaling should have updated fully). We should expect that the nav bar be 55 pixels wide.

在这里您可以看到应用中的区域实际上比以前更小了.与我预期的 55 像素相比，这里的导航栏大约有 37 像素宽.我在如何缩放 UWP 应用时遗漏了什么?

Here you can see that areas in the app actually got smaller than they were before. The nav bar here is about 37 pixels wide compared to the 55 I expected. Is there something I missed in how I must scale a UWP app?

我目前没有完整的 xaml 代码，因为我在笔记本电脑上，但我知道导航栏是网格的一部分，看起来像这样.此网格是运行应用的整体网格，导航栏是第一列.

I do not have the entire xaml code with me at the moment as I am on my laptop, but I know that nav bar is part of a grid which looks like this. This grid is the overall grid that is running the app, with the nav bar being the first column.

<Grid x:name="gridOverall">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    ...

</Grid>

我认为它可能是应用程序清单中的启用缩放选项或其他东西，但我找不到类似的东西.我预计我使用的图像会出现这样的问题，因为我还没有包含更高分辨率的选项，但我没想到 xaml 中定义的布局元素会发生这种情况.

I thought it might have been an enable-scaling option in the app manifest or something but I couldn't find anything like it. I expected issues like this to arise with the images I used as I did not yet include higher resolution options yet, but I didn't expect this to happen with layout elements that are defined in the xaml.

任何人都可以对可能发生的事情有所了解吗?这是我的第一个完整应用程序，我有点迷茫.

Can anyone shed some insight on what might be going on? This is my first full app and I'm a little lost.

推荐答案

Windows 8.1 没有 125% 缩放的概念；它使用 100%/140%/180%.DisplayInformation.ResolutionScale 的值将是 100.所以它实际上被缩放了 80% (100/125).而 44 * 0.8 是 ~35.

Windows 8.1 doesn't have a concept of 125% scaling; it uses 100% / 140% / 180%. The value of DisplayInformation.ResolutionScale will be 100. So it's actually scaled by 80% (100 / 125). And 44 * 0.8 is ~35.

注意:不支持以下内容，因为它依赖于反射和在 Windows 8.1 应用程序中使用 Windows 10 的功能.使用风险自负.

这是一种方法，您可以尝试为 Windows 10 用户提供更好的 Windows 8.1 应用体验.我在 Windows 10 上对其进行了简要测试，但您也希望在 Windows 8.1 上进行更彻底的测试:

Here's one way you can try and give people on Windows 10 a better experience with your Windows 8.1 app. I briefly tested it on Windows 10 but you would want to do more thorough testing on Windows 8.1 as well:

private void FixUpScale()
{
  // Need to add a using for System.Reflection;

  var displayInfo = DisplayInformation.GetForCurrentView();
  var displayType = displayInfo.GetType();
  var rawPixelsProperty = displayType.GetRuntimeProperty("RawPixelsPerViewPixel");

  if (rawPixelsProperty != null)
  {
    var realScale = (double)rawPixelsProperty.GetValue(displayInfo);

    // To get to actual Windows 10 scale, we need to convert from 
    // the de-scaled Win8.1 (100/125) back to 100, then up again to
    // the desired scale factor (125). So we get the ratio between the
    // Win8.1 pixels and real pixels, and then square it. 
    var fixupFactor = Math.Pow((double)displayInfo.ResolutionScale /
      realScale / 100, 2);

    Window.Current.Content.RenderTransform = new ScaleTransform
    {
      ScaleX = fixupFactor, 
      ScaleY = fixupFactor 
    };
  }
}

这篇关于如何在 uwp 应用程序上正确启用 dpi 缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！