Search code examples
uno-platform

Uno-platform: Canvas not in pixel but scaled by something


Uno says it is 'Pixel Perfect Everywhere'. So I created a canvas with width 320 and height 320 and placed some buttons inside, one in each edge.

Now when I start the app, on Android or IOS, the canvas is bigger than the screen, and the buttons on the right side don't show at all.

But my iPhone8 and my Samsung S9 have a far bigger screen resolution than just 320 by 320. The whole canvas gets scaled by something, and even the window bounds of the main window are far smaller than my screen resolution.

My questions:

  1. Can I turn off the scaling and use the real resolution?
  2. Is there a property where I can get the scaling factors, so I can resize my canvas and just calculate everything to the scaled size?

Solution

  • Layouting values like Width and Height in Uno/WinUI Xaml are defined in 'logical pixels', as distinct from 'physical pixels'. Since devices with similar physical dimensions may have wildly different physical pixel densities, logical pixels are a better way to specify layout dimensions in most cases.

    Make sure you understand Xaml's layouting system - you normally shouldn't hard-code the dimensions at all when you're stretching content to the width of the screen. For example:

        <Grid HorizontalAlignment="Stretch"
              Height="320">
            <Button Content="Button1"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top" />
            <Button Content="Button2"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top" />
            ...
        </Grid>
    

    All that said, in the very rare cases that you do need to work with device-dependent physical pixels, you can use the DisplayInformation class and its properties, eg:

                var displayInformation = DisplayInformation.GetForCurrentView();
                var scaleFactor = displayInformation.RawPixelsPerViewPixel;
                ...