[UWP]确保控件在所需的4x4布局网格内对齐 [英] [UWP]Ensuring controls align within the required 4x4 layout grid

问题描述

虽然我之前为Windows Phone和Windows 8开发过，但我很难找到一种最佳方法来确保我的控件在UWP文档中推荐/要求的4x4布局网格上排列。

Although I've developed previously for Windows Phone and Windows 8, I'm struggling to find an optimal way of ensuring that my controls are lined up on the 4x4 layout grid recommended/required in the UWP documentation.

以下面的例子为例：

和相应的XAML片段：

and the corresponding XAML snippet:

            <PivotItem DataContext="{Binding SettingsPartViewModel}" Header="Settings">
                <ScrollViewer Margin="0,12,-12,0" HorizontalContentAlignment="Left"
                              VerticalScrollBarVisibility="Auto">
                    <RelativePanel HorizontalAlignment="Left">

                        <TextBox x:Name="Username" Header="Username"
                                 RelativePanel.AlignLeftWithPanel="True"
                                 RelativePanel.Below="UseLightThemeToggleSwitch"
                                 Text="{Binding Username, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsSpellCheckEnabled="False" MinWidth="256" MaxWidth="256"/>
                        <PasswordBox x:Name="Password" Header="Password"
                                 RelativePanel.AlignLeftWithPanel="True"
                                 RelativePanel.Below="Username"
                                 Password="{Binding Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinWidth="256" MaxWidth="256"/>
                        <Button x:Name="Test"
                                RelativePanel.AlignLeftWithPanel="True"
                                RelativePanel.Below="Password"
                                Content="Verify username and password"
                                />
                    </RelativePanel>
                </ScrollViewer>
            </PivotItem>

正如您所看到的，我没有更改任何关于填充等的默认值，但我对此不满意两个方面：

As you can see, I've not altered any of the defaults with regards to padding, etc, but I'm unhappy with two aspects:

1. 密码字段的标题太靠近用户名文本框 - 我需要一些填充，以便更清楚密码标题与该单词下面的TextBox。
2. "验证"按钮与密码文本框对接 - 我需要在TextBox和密码之间添加一些填充。

将边距设置为"0"是否足够/安全12,0,0"确保控件间隔开来并且是4的倍数？

Is it sufficient/safe to just set the margin to "0,12,0,0" to ensure that the controls are spaced out AND to a multiple of 4?

我知道这看起来像一个非常愚蠢的问题，但文档真的强调了布局网格的重要性而我是困惑的是（a）文档没有进一步帮助和（b）控件没有默认的边距来帮助。

I know that reads like a really dumb question but the documentation really stresses the importance of that layout grid and I'm bemused that (a) the documentation doesn't help further and (b) the controls don't come with default margins to help either.

谢谢。

推荐答案

你好，

>>将边距设置为"0,12,0,0"是否足够/安全？确保控件间隔开并且为4的倍数

>>Is it sufficient/safe to just set the margin to "0,12,0,0" to ensure that the controls are spaced out AND to a multiple of 4

是的，这是安全的。实际上4 * 4意味着系统将帮助您以有效像素渲染UI，这意味着我们可以设计

有效分辨率对于relativepanel总是做什么并不是一回事。所以我没有看到任何会破坏4的倍数的东西。

Yep, it's safe. And actually 4*4 means system will help you render your UI in effective pixels, which means we can design for the effective resolution It is not the same thing about what relativepanel always does. So I haven't saw anything which will break multiple of 4 here.

当我们在使用Visual Studio管理器时使用relativepanel时，我们希望我们的UI在应用程序的大小更改时表现不同。我们可以通过设置边距和填充以及我们控制的位置来手动控制我们的UI。因此，如果您尝试使用
做响应式设计，则只需在自适应触发器中设置属性即可。

While we are using relativepanel when using Visual Studio manager, we expect our UI behaves different when app's size changes. We can manually control our UI by setting the margin and padding and also the place of our control. So if you are trying to do Responsive design, you just need to set the properties in your adaptivetrigger.

祝你好运，

Barry

这篇关于[UWP]确保控件在所需的4x4布局网格内对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！