如何在不使用 itemssource 的情况下在 UWP 中显示静态表格/网格？

Question

对于我的项目，我想在 UWP 应用程序中显示一个 3 行每行 4 列的网格/表格。所有列都有一个文本框控件。我不想在网格上显示任何数据，而是想从用户那里获取输入。我试过网格/网格视图控件。我不太确定如何使用文本框控件指定 xaml 以显示 3 行和 4 列？像这张图。

非常感谢任何建议。

Answer 1

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="MyTableGrid" BorderBrush="Black" BorderThickness="2">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
            <TextBlock Text="Column 1" FontSize="25" TextAlignment="Center"/>
        </Border>
        <Border Grid.Column="1" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
            <TextBlock Text="Column 2" FontSize="25" TextAlignment="Center"/>
        </Border>
        <Border Grid.Column="2" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
            <TextBlock Text="Column 3" FontSize="25" TextAlignment="Center"/>
        </Border>
        <Border Grid.Column="3" Grid.Row="0" BorderThickness="2" BorderBrush="Black">
            <TextBlock Text="Column 4" FontSize="25" TextAlignment="Center"/>
        </Border>


        <Border Grid.Column="0" Grid.Row="1" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="1" Grid.Row="1"  BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="2" Grid.Row="1" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="3" Grid.Row="1" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="0" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="1" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="2" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="3" Grid.Row="2" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="0" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="1" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="2" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
        <Border Grid.Column="3" Grid.Row="3" BorderThickness="2" BorderBrush="Black">
            <TextBox BorderBrush="Gray" BorderThickness="5" Height="65" Width="135"/>
        </Border>
    </Grid>        
</Grid>

输出

我制作了您的屏幕截图的粗略示例，您可以在行和列定义中编辑行和列的高度和宽度，目前我还没有设置任何高度和宽度，这是为了一般的想法，所以您需要自定义它自己的方式

建议

添加新的用户控制页面并将其用作表格，然后在您的主页中引用它，因此您可以随时单独自定义它，并更清楚地进行数据绑定和保存用户输入