Create multiple rows and columns xaml

Question

i need to create a lot of rows and columns in order to manage my custom controls correctly. So my question is if it is possible to achieve the same result as the code shown below? In a more clean way, this feels so unpractical...

<Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>

no, that's the only way. could you reorganize your page, maybe use some user controls? — Z ., Jul 03 '14 at 13:13
or you can subclass the grid and add properties for how many rows and cols you need — Z ., Jul 03 '14 at 13:15
you can shorten the definitions by using `` and `` instead. Do you ever need to define the widths and heights of your definitions or should they always be default? — default, Jul 03 '14 at 13:30

score 4 · Accepted Answer · answered Jul 03 '14 at 13:34

4

You could have a look at AutoGrid for syntax as follows:

<AutoGrid RowCount="2" RowHeight="35" Columns="100,auto">
  <Label />
  <TextBox />
  <Label />
  <TextBox />
</AutoGrid>

answered Jul 03 '14 at 13:34

Wouter

2,170
1
28
58

score 2 · Answer 2 · answered Jul 03 '14 at 13:27

You can do the same in code behind, but usually you should to do that in XAML like you did.

        // Add 10 Rows
        for (int i = 0; i < 10; i++)
        {
            var height = GridLength.Auto;
            if (i == 0)
                height = new GridLength(1, GridUnitType.Star);
            layoutGrid.RowDefinitions.Add(new RowDefinition()
            {
                Height = height
            });    
        }

        // Add 7 Columns
        for (int i = 0; i < 7; i++)
        {
            var width = GridLength.Auto;
            if (i == 0)
                width = new GridLength(1, GridUnitType.Star);
            layoutGrid.ColumnDefinitions.Add(new ColumnDefinition()
            {
                Width = width
            });
        }

score 0 · Answer 3 · answered Jul 03 '14 at 14:00

Another alternative to Wouter's answer of AutoGrid is ApexGrid. The code would look very similar to AutoGrid.

<apex:ApexGrid Rows="Auto,*" Columns="100,Auto">
   <Label Grid.Row="0" Grid.Column="0" />
   <TextBox Grid.Row="0" Grid.Column="1" />
   <Label Grid.Row="1" Grid.Column="0" />
   <TextBox Grid.Row="1" Grid.Column="1" />
</apex:ApexGrid>

Create multiple rows and columns xaml

3 Answers3