当窗口大小发生变化时，如何有效地缩放 WinUI 3 桌面应用程序中的所有元素？

Question

I'd like to have everything in my WinUI 3 (v1.2) desktop app UI ( MainWindow ) scale up in size as the MainWindow changes in size. I'd also like to maintain the relative positioning of everything in the MainWindow . The purpose is to allow elderly users a quick and easy way to "enlarge" content by simply expanding the size of the window.

For example, take a vanilla Template Studio WinUI 3 desktop app with menu bar style navigation and a single page (call it MainPage ). Replace MainPage.xaml with

<Page
    x:Class="TestScale.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Grid.Row="0" Grid.RowSpan="4">
        <Border x:Name="Border" Width="300" Height="200" BorderThickness="2" BorderBrush="Red">
            <TextBlock Text="The quick brown fox." HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </Grid>
</Page>

which just draws a red rectangle with a TextBlock in the middle of the page (ignoring space used by ShellPage.xaml ).

I'd like a straightforward way to scale everything, if possible, so that the rectangle and text increase in size ( x and y ) in the same proportions ( dx and dy ) that MainPage does when MainWindow changes, but also maintain their relative positions in the xy plane. I've tried using Scale and various Translation s, but it always seems certain elements respond differently or only one dimension responds while the other stays fixed.

For example, adding

    Scale="{x:Bind ((app:App)app:App.Current).ScaleToInitialSize, Mode=OneWay}"

to the definition of ShellPage.xaml almost does the trick except the position of the rectangle changes because the actual size of MainPage changes to reflect pixels used but the rectangle size reflects "scaled" sizes.

Is there a good discussion of scaling in WinUI 3 or UWP I've missed? I currently achieve this by binding everything to a Ratio property ( Vector2 or Size ) in my App class that changes whenever MainWindow.SizeChanged fires. Unfortunately, this means I also have to bind things like XAML Thickness , FontSize , and even CornerRadius properties to maintain the look and layout of the UI.

I expect this is a noob question but I can't seem to find any discussion anywhere. Any help gratefully appreciated.

Answer 1

You can use the ViewBox . The ViewBox scales its content automatically.

<Viewbox>
    <Grid
        Grid.Row="0"
        Grid.RowSpan="4">
        <Border
            x:Name="Border"
            Width="300"
            Height="200"
            BorderBrush="Red"
            BorderThickness="2">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="The quick brown fox." />
        </Border>
    </Grid>
</Viewbox>