Question

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

从网格或堆叠面板开始并嵌套它们会更好吗？创建一个结合了TextBox和TextBlock的自定义控件是否更好？

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

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

您可以从此link

了解uwp开发的基础知识

Answer 2

为了提高性能，只有一个面板更好 - 请参阅UWP app developer docs的性能。因此，我会使用relative panel，结果是这样的：

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

但是老实说，没有“正确”的答案 - 这取决于你在应用中的排名更高，无论是性能还是代码可读性。

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

2 个答案: