更改窗口大小 UWP 时更改控件大小布局

Posted 2023-02-22

【中文标题】更改窗口大小 UWP 时更改控件大小布局

【英文标题】：Change controls size layout when changing window's size UWP

【发布时间】：2016-11-18 21:29:40

【问题描述】：

我想让我的控件在相同的边距下变大，就像给窗口大小的 10% 一样大，所有控件都应该像窗口一样大 10%，如果窗口也变大，它们应该变宽。 ..等等

我对此进行了很多搜索并找到了这个主题：https://msdn.microsoft.com/windows/uwp/layout/layouts-with-xaml 但仍然不知道如何制作我想要的东西。我没有很多控件，它们只有 9 个！它们是计时器，仅此而已！

我可以在 Forms 或 WPF 中执行此操作，但在 Windows UI XAML 中阻止了很多功能，因此我无法像为其他人那样执行此操作。这就是为什么我试图找到另一种替代方法来做到这一点。

我的 Windows 主窗口 WPF（屏幕截图）：

WPF XAML：

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

<Grid x:FieldModifier="public" x:Name="mainGrid" Background="Black" Loaded="Grid_Loaded" HorizontalAlignment="Left" Width="1910">

    <TextBlock x:FieldModifier="public" x:Name="playerTxt" Margin="57,66,0,0" TextWrapping="Wrap" Text="PLAYER:" Foreground="#FF0015FF" FontSize="36" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="148"/>
    <Border x:FieldModifier="public" x:Name="separator1" Height="1" Margin="43,135,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top" />
    <TextBlock x:FieldModifier="public" x:Name="modeTxt" Margin="57,149,0,0" TextWrapping="Wrap" Text="PREP TIME:" Foreground="#FF0015FF" FontSize="42" Height="51" VerticalAlignment="Top" HorizontalAlignment="Left" Width="247"/>
    <Border x:FieldModifier="public" x:Name="separator2" Height="1" Margin="43,216,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top"/>
    <TextBlock x:FieldModifier="public" x:Name="nextUpTxt" Margin="57,230,0,0" TextWrapping="Wrap" Text="NEXT UP:" Foreground="#FF0015FF" FontSize="36" Height="67" VerticalAlignment="Top" HorizontalAlignment="Left" Width="171"/>
    <TextBlock x:FieldModifier="public" x:Name="currPlayerTxt" Margin="0,66,1333,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" TextAlignment="Right" Height="56" VerticalAlignment="Top" HorizontalAlignment="Right" Width="349"/>
    <TextBlock x:FieldModifier="public" x:Name="nextPlayerTxt" Margin="228,230,0,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="349" TextAlignment="Right"/>
    <TextBlock x:FieldModifier="public" x:Name="timerTxt" Margin="349,153,0,0" TextWrapping="Wrap" Text="0000:00" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="228" TextAlignment="Right"/>
</Grid>

所有我想让它灵活的东西以及我改变我的窗口大小。

【问题讨论】：

尝试使用AdaptiveTrigger

【参考方案1】：

我认为您想在窗口大小更改时更改控件大小。但是 TextBlock 的大小与 TextBlock 的 FontSize 相同。因此，我使用 ViewBox 的大小将与页面大小相同。如果您不这样做在Frame中设置页面，页面的大小将与窗口的大小一样大。

<Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush">
 <Viewbox>
        <Grid>
            <Grid.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground"
                      Value="#FF0015FF"></Setter>
                    <Setter Property="FontSize"
                      Value="36"></Setter>
                    <Setter Property="HorizontalAlignment"
                      Value="Center"></Setter>
                    <Setter Property="VerticalAlignment"
                      Value="Center"></Setter>
                    <Setter Property="Margin"
                            Value="10,10,10,10"></Setter>
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="PLAYER:" 
                       ></TextBlock>
                <TextBlock Grid.Column="1" 
                       Text="N/A"></TextBlock>
            </Grid>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="PREP TIME:"></TextBlock>
                <TextBlock Grid.Column="1"
                       Text="0000:00"></TextBlock>
            </Grid>
            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="NEXT UP:" ></TextBlock>
                <TextBlock Grid.Column="1"
                       Text="N/A"></TextBlock>
            </Grid>
        </Grid>
    </Viewbox>
</Grid>

http://7xqpl8.com1.z0.glb.clouddn.com/ChangeControlsSizeLayout.gif

【讨论】：

@GameHackerPM 如果您不希望适应不同的设备并且您只想让您的应用程序在支持以这种方式调整大小的桌面上运行，那么这是一个很好的答案。我还建议您查看 AdaptiveTrigger，您可以在 XAML 中使用它来在屏幕达到特定尺寸时操作内容。请参阅此处了解更多信息：(microsoft.com/en-gb/developers/articles/week03aug15/…)。

有史以来最好的答案，非常感谢您的出色回答。