XAML 当窗口大小改变时,如何有效地缩放WinUI3桌面应用程序中的所有元素?

3xiyfsfu  于 2022-12-25  发布在  其他
关注(0)|答案(1)|浏览(186)

我希望WinUI 3(v1.2)桌面应用UI(MainWindow)中的所有内容都随着MainWindow的大小变化而放大。我还希望保持MainWindow中所有内容的相对位置。目的是让老年用户能够通过简单地扩展窗口大小来快速轻松地"放大"内容。
例如,以具有菜单栏样式导航和单页面的vanilla Template StudioWinUI 3桌面应用程序(称为MainPage)为例。

<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>

它只是在页面中间绘制一个带有TextBlock的红色矩形(忽略ShellPage.xaml使用的空间)。
如果可能的话,我希望使用一种直接的方式来缩放所有内容,以便矩形和文本的大小增加(xy),比例相同(dxdy)当MainWindow改变时MainPage的变化,而且保持它们在xy平面中的相对位置。我尝试过使用Scale和各种Translation,但似乎某些元素的响应总是不同,或者只有一个维度响应,而其他维度保持固定。
例如,添加

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

ShellPage.xaml的定义几乎完成了该技巧,除了矩形的位置改变之外,因为MainPage的实际大小改变以反映所使用的像素,而矩形大小反映"缩放"的大小。
是否有关于WinUI 3UWP中的缩放的好的讨论我错过了?我目前通过将所有内容绑定到Ratio属性来实现这一点(Vector2Size),它在MainWindow.SizeChanged触发时发生变化。不幸的是,这意味着我还必须绑定像XAML Thickness这样的东西,FontSize,甚至CornerRadius属性来维护UI的外观和布局。
我想这是一个新手的问题,但我似乎不能找到任何讨论的地方。任何帮助感激。

7rfyedvj

7rfyedvj1#

您可以使用ViewBox。ViewBox会自动缩放其内容。

<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>

相关问题