How to display static table/grid in UWP without us

2019-08-07 23:51发布

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.enter image description here

Any suggestion is highly appreciated.

1条回答
在下西门庆
2楼-- · 2019-08-08 00:32

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

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

查看更多
登录 后发表回答