创建 UWP XAML 表单以提示输入姓名和邮寄地址的最佳方法是什么？

Question

我想创建一个标准的名称和地址表单，例如在一行上有多个文本框以节省空间。

从网格或堆栈面板开始并嵌套它们更好吗？ 创建组合文本框和文本块的自定义控件是否更好？

我将在下面发布我的解决方案。 我只是好奇是否有更好的方法来做到这一点，以及每种方法的优点是什么。

    <!-- Snipplet of UWP XAML -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Width="400" Background="Aqua" Padding="10"
          BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="First Name"/>
                <TextBlock Grid.Column="1" Text="Last Name"/>
                <TextBox Grid.Row="1" Grid.Column="0" Background="White"
                    Text="John"/>
                <TextBox Grid.Row="1" Grid.Column="1" Background="White" 
                    Text="Smith"/>
            </Grid>
            <TextBlock>Address1</TextBlock>
            <TextBox Background="White" Text="1 Center St"/>
            <TextBlock>Address2:</TextBlock>
            <TextBox Background="White"/>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="City"/>
                <TextBlock Grid.Column="1" Text="State"/>
                <TextBlock Grid.Column="2" Text="Zip"/>
                <TextBox Grid.Row="1" Grid.Column="0" Background="White"
                   Text="Townville"/>
                <TextBox Grid.Row="1" Grid.Column="1" Background="White"
                   Text="XX"/>
                <TextBox Grid.Row="1" Grid.Column="2" Background="White" 
                   Text="12345"/>
            </Grid>
            <TextBlock/>
            <StackPanel 
                   Orientation="Horizontal" FlowDirection="RightToLeft">
                <Button Content="Ok" Margin="0,0,10,0" 
                  Width="100" BorderThickness="1" BorderBrush="Black"/>
                <Button Content="Cancel" 
                  Width="100" BorderThickness="1" BorderBrush="Black"/>
            </StackPanel>
        </StackPanel>
    </Grid>

Answer 1

您可以

根据需要设计控件，也可以在UserControl上单独制作控件，但这里需要注意的是，您已经将文本放在文本框中而不是使用占位符文本，所以我在您的代码中更改了它

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Width="400" Background="Aqua" Padding="10"
      BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="First Name"/>
            <TextBlock Grid.Column="1" Text="Last Name"/>
            <TextBox Grid.Row="1" Grid.Column="0" Background="White"
                PlaceholderText="John"/>
            <TextBox Grid.Row="1" Grid.Column="1" Background="White" 
                PlaceholderText="Smith"/>
        </Grid>
        <TextBlock>Address1</TextBlock>
        <TextBox Background="White" PlaceholderText="1 Center St"/>
        <TextBlock>Address2:</TextBlock>
        <TextBox Background="White"/>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="City"/>
            <TextBlock Grid.Column="1" Text="State"/>
            <TextBlock Grid.Column="2" Text="Zip"/>
            <TextBox Grid.Row="1" Grid.Column="0" Background="White"
               PlaceholderText="Townville"/>
            <TextBox Grid.Row="1" Grid.Column="1" Background="White"
               PlaceholderText="XX"/>
            <TextBox Grid.Row="1" Grid.Column="2" Background="White" 
               PlaceholderText="12345"/>
        </Grid>
        <TextBlock/>
        <StackPanel 
               Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button Content="Ok" Margin="0,0,10,0" 
              Width="100" BorderThickness="1" BorderBrush="Black"/>
            <Button Content="Cancel" 
              Width="100" BorderThickness="1" BorderBrush="Black"/>
        </StackPanel>
    </StackPanel>
</Grid>

您可以从此链接了解 UWP 开发的基础知识

Answer 2

为了提高性能，只有一个面板更好 - 请参阅 UWP 应用开发人员有关性能的文档。因此，我会使用相对面板，最终得到这样的内容：

<RelativePanel>
    <!-- Horizontal group -->
    <TextBox x:Name="TxtBx1"/>
    <TextBox x:Name="TxtBx2" RelativePanel.RightOf="TxtBx1"/>
    <!-- Below the first group -->
    <TextBox x:Name="TxtBx3" RelativePanel.Below="TxtBx1"/>
    <!-- Another horizontal group -->
    <TextBox x:Name="TxtBx4" RelativePanel.Below="TxtBx3"/>
    <TextBox x:Name="TxtBx5" RelativePanel.RightOf="TxtBx4"/>
</RelativePanel>

但老实说，没有这样的"正确"答案 - 这取决于您在应用程序中排名更高的内容，无论是性能还是代码可读性。