Windows 10 xaml控件中心屏幕

Question

我正在开发适用于Windows 10的应用程序。我以前曾在少数几个Windows 7应用程序上工作过，而且我现在正试图解决许多差异问题。我在通用应用程序上试试运气，我想要将一些控件集中在一起，这样无论屏幕/窗口大小如何，登录详细信息都会居中。

我一直在寻找这方面的帮助，但我发现其中很多都是这样的。婴儿期;换句话说，我发现相关信息并不是很多地方，更不用说有用了。我希望有人能指出我正确的方向吗？

这是桌面视图上的窗口：

这就是我的意思，文本框，标签不会随着窗口大小的移动而移动，更不用说不同的屏幕尺寸了。

    </Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FlyoutBase.AttachedFlyout="{StaticResource FlyoutBase1}">
    <CheckBox x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" Margin="1038,441,0,0" VerticalAlignment="Top" ClickMode="Press"/>
    <TextBox x:Name="txtUserName" HorizontalAlignment="Left" Margin="818,441,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="202"/>
    <PasswordBox x:Name="txtPassword" HorizontalAlignment="Left" Margin="818,478,0,0" VerticalAlignment="Top" Width="202"/>
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="723,446,0,0" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Top"/>
    <TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Margin="735,478,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top"/>
    <Button x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" Margin="959,539,0,0" VerticalAlignment="Top" Width="61"/>
    <Button x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Left" Margin="818,539,0,0" VerticalAlignment="Top" Width="116"/>
    <ProgressRing x:Name="progressring1" HorizontalAlignment="Left" Margin="873,592,0,0" VerticalAlignment="Top" Height="87" Width="103"/>
    <TextBlock x:Name="txtStatus" HorizontalAlignment="Left" Margin="818,510,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
    <Grid HorizontalAlignment="Left" Height="180" Margin="692,412,0,0" VerticalAlignment="Top" Width="496"/>
</Grid>

Answer 1

不要使用边距进行定位。仅使用边距强制对象周围的边距。

要将元素置于其父级中心，将其Horizo​​ntalAlignment或VerticalAlignment设置为Center。

要获得更多控制，请使用Grid，StackPanel和RelativePanel等布局控件将控件放在所需位置。对于您的布局，您可以在网格中设置3行和3列以整体放置控件，然后设置Horizo​​ntalAlignment以将控件放置在网格中。这里是对Xaml的快速更新，只要窗口宽度足以让所有东西都适合（您可以使用自适应技术为更窄的视图重排事物），就可以使事物保持中心状态。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="240"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <CheckBox Grid.Column="2" Grid.Row="1" Margin="10,0" x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" VerticalAlignment="Top" ClickMode="Press"/>
    <TextBox Grid.Column="1" Grid.Row="1" x:Name="txtUserName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
    <PasswordBox Grid.Column="1" Grid.Row="2" x:Name="txtPassword" HorizontalAlignment="Stretch"  VerticalAlignment="Top" />
    <TextBlock x:Name="textBlock" Margin="10,0" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Center"/>
    <TextBlock x:Name="textBlock_Copy" Margin="10,0" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"  TextWrapping="Wrap" Text="Password:" VerticalAlignment="Center"/>
    <Button Grid.Column="1" Grid.Row="3" x:Name="btnSignin" Content="Login" HorizontalAlignment="Left"  VerticalAlignment="Top"/>
    <Button Grid.Column="1" Grid.Row="3" x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Right" VerticalAlignment="Top" />
    <ProgressRing x:Name="progressring1" HorizontalAlignment="Left"  VerticalAlignment="Top" Height="87" Width="103"/>
    <TextBlock x:Name="txtStatus" HorizontalAlignment="Left"  TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
    <Grid HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="496"/>
</Grid>

在MSDN上查看Quickstart: Defining layouts和Adding layout controls。

Answer 2

以上是正确的方法。使用带有自动的网格布局作为行高或列宽是一种很好的方法，因为它们会自动随您缩放。根据项目的难度，您还可以使用自适应触发器。以下是使用自适应触发器http://jamesqquick.com/windows-10-adaptive-triggers-intro/的一个真正的介绍示例。例如，通过这种方式，您可以根据屏幕尺寸增大文字。

通过测试所有不同尺寸，您可以做得很好。这个很重要！我通常只是作为Windows 10应用程序运行并在各个方向调整大小！