如何在不使用itemsource的情况下在UWP中显示静态表/网格？ [英] How to display static table/grid in UWP without using itemsource?

问题描述

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

任何建议都非常感谢。

解决方案

XAML

 < Grid Background = {ThemeResource ApplicationPageBgroundgroundThemeBrush}> 
< Grid x：Name =MyTableGridBorderBrush =BlackBorderThickness =2> 
< Grid.RowDefinitions> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< RowDefinition /> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< /Grid.ColumnDefinitions> 
 
< Border Grid.Column =0Grid.Row =0BorderThickness =2BorderBrush =Black> 
< TextBlock Text =Column 1FontSize =25TextAlignment =Center/> 
< / Border> 
< Border Grid.Column =1Grid.Row =0BorderThickness =2BorderBrush =Black> 
< TextBlock Text =Column 2FontSize =25TextAlignment =Center/> 
< / Border> 
< Border Grid.Column =2Grid.Row =0BorderThickness =2BorderBrush =Black> 
< TextBlock Text =Column 3FontSize =25TextAlignment =Center/> 
< / Border> 
< Border Grid.Column =3Grid.Row =0BorderThickness =2BorderBrush =Black> 
< TextBlock Text =Column 4FontSize =25TextAlignment =Center/> 
< / Border> 
 
 
< Border Grid.Column =0Grid.Row =1BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =1Grid.Row =1BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =2Grid.Row =1BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =3Grid.Row =1BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =0Grid.Row =2BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =1Grid.Row =2BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =2Grid.Row =2BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =3Grid.Row =2BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =0Grid.Row =3BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =1Grid.Row =3BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =2Grid.Row =3BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< Border Grid.Column =3Grid.Row =3BorderThickness =2BorderBrush =Black> 
< TextBox BorderBrush =GrayBorderThickness =5Height =65Width =135/> 
< / Border> 
< / Grid> 
< / Grid> 
  

输出

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

建议

添加新的用户控制页面并将其作为表格使用，然后在您的主页面中引用它，以便每当您想要时您都可以单独对其进行自定义并进行数据绑定并更清楚地保存用户输入

For my project, I want to display a grid/table with 3 rows having 4 columns on each row in UWP applicatoin. All the columns will have a textbox control. I don't want to display any data on the grid rather I want to take the input from user. I've tried grid/gridview control. I'm not really sure how I can specify the xaml for displaying 3 rows and 4 columns with textbox control? Something like this picture.

Any suggestion is highly appreciated.

解决方案

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

I made rough sample of your screen shot you can edit height and width of row and column in row and column definition, currently i haven't set any height and width & it is for general idea so you need to customize it in your own way

Suggestion

add new user control page and and use it as table and then reference it in your main-page so whenever you want you want you can customize it separately and data binding and saving user input more clearly

这篇关于如何在不使用itemsource的情况下在UWP中显示静态表/网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！