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

时间:2017-11-21 06:15:12

标签: xaml listview gridview uwp grid

对于我的项目,我想在UWP应用程序中显示每行3行有3列的网格/表格。所有列都将具有文本框控件。我不想在网格上显示任何数据,而是想从用户那里获取输入。我已经尝试过grid / gridview控件。我不确定如何指定xaml以显示带有文本框控件的3行和4列?像这张照片。enter image description here

任何建议都受到高度赞赏。

1 个答案:

答案 0 :(得分:2)

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

<强>输出

Output

我制作了您的屏幕截图的粗略样本,您可以在行和列定义中编辑行和列的高度和宽度,目前我没有设置任何高度和宽度&amp;这是一般的想法,所以你需要以自己的方式自定义

<强>建议

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