Windows 10 xaml 控制中心屏幕

Question

我正在为 windows 10 开发一个应用程序。我之前开发过少数 Windows 7 个应用程序，现在我正在努力适应其中的许多差异。我正在通用应用程序上试试运气，我想将一些控件居中，以便无论 screen/windows 大小如何，登录详细信息都居中。

我一直在寻求这方面的帮助，但我发现其中很多都处于起步阶段；换句话说，我在很多地方都找不到相关信息，更不用说有帮助了。我希望这里有人能给我指明正确的方向？

这是桌面视图中的 window：

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

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

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

要使元素在其父元素中居中，请将其 HorizontalAlignment 或 VerticalAlignment 设置为居中。

要获得更多控制，请使用布局控件（例如 Grid、StackPanel 和 RelativePanel）将控件放置在您想要的位置。对于您的布局，您可以在网格中设置 3 行和 3 列以整体放置控件，然后设置 HorizontalAlignment 以将控件放置在网格中。这是对 Xaml 的快速更新，只要 window 足够宽以适合所有内容（您可以使用自适应技术重排内容以获得更窄的视图）

<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 and Adding layout controls。

Answer 2

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

您测试了所有不同尺寸，效果很好。这个很重要！我通常只是运行作为一个 Windows 10 应用程序并在各个方向调整它的大小！

Windows 10 xaml 控制中心屏幕

Windows 10 xaml Controls Centre Screen

xaml

user-interface

win-universal-app

windows-10