How to enable dpi scaling correctly in uwp application

I created my first UWP application. This is an application for Windows 8.1 UWP that will help in planning courses at my university, where the current system is terrible. I am working on this with my Windows 10 desktop computer with a 1080p monitor while scaling the system by default (100%). I deployed the test assembly and installed it on my laptop. The laptop is also Windows 10 and 1080p, but has a smaller screen, so I have a system zoom of 125%. My problem is that instead of this higher scaling factor, in which my application has more features, it does the opposite and compresses everything in the application.

Here are two screenshots from my laptop when working with different zoom ratios. The first is 100% where everything in the system is too small.

The application works at 100% scaling.

Please note that the navigation bar on the left is exactly 44 pixels wide as the design. Now, in the next screenshot, the laptop works with 125% system scaling (I logged out and before taking a screenshot, so the scaling should be completely updated). We should expect the navigation bar to have a width of 55 pixels.

The application works at 125% zoom.

Here you can see that the areas in the application were actually smaller than before. The navigation bar here is about 37 pixels compared to 55 expected. Is there something I missed in how I should scale the UWP application?

xaml , , , nav bar , . , , .

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

    ...

</Grid>

, - - , . , , , , , , xaml.

- , ? , .

+4
1

Windows 8.1 125% ; 100%/140%/180%. DisplayInformation.ResolutionScale 100. , 80% (100/125). 44 * 0,8 ~ 35.

. , Windows 10 Windows 8.1. .

Windows 10 Windows 8.1. Windows 10, Windows 8.1:

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 
    };
  }
}
+1

All Articles