CODEWITHSUNDEEP
c#wpf
PuRe
PuRe

Reputation: 189

WPF Grid different Column Size & Position

I am trying to achieve this kind of grid:

enter image description here

so I need to have a Grid where two columns can be different if they are in different rows. (also the same should be possible for rows).

My grid so far looks something like this

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Label Content="Left" Grid.Column="0" />
        <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" ResizeBehavior="PreviousAndNext"
              Width="5" Background="#FFBCBCBC"/>
    <Label Content="Right" Grid.Column="2" />

    <GridSplitter HorizontalAlignment="Stretch"
                  ResizeDirection="Rows"
              VerticalAlignment="Stretch" 
              Grid.Column="0"  Grid.Row="1" Grid.ColumnSpan="3" ResizeBehavior="PreviousAndNext"
              Height="5" Background="#FFBCBCBC"/>

    <Label Content="Left" Grid.Column="0" Grid.Row="2"/>
    <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" Grid.Row="2" ResizeBehavior="PreviousAndNext"
              Width="5" Background="#FFBCBCBC"/>
    <Label Content="Right" Grid.Column="2" Grid.Row="2" />
</Grid>

How can I make this possible?

Upvotes: 2

Views: 5785

Answers (3)

Lei Yang
Lei Yang

Reputation: 4325

Vertically use 3 rows, and 1st and 3rd row has 3 columns each. The 3 rows' columns don't align to each other. 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <GridSplitter HorizontalAlignment="Stretch"
          ResizeDirection="Rows"
          VerticalAlignment="Stretch" 
          Grid.Column="0"  Grid.Row="1" ResizeBehavior="PreviousAndNext"
          Height="5" Background="#FFBCBCBC"/>

    <GridSplitter HorizontalAlignment="Stretch"
          ResizeDirection="Rows"
          VerticalAlignment="Stretch" 
          Grid.Column="0"  Grid.Row="3" ResizeBehavior="PreviousAndNext"
          Height="5" Background="#FFBCBCBC"/>

    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <GridSplitter HorizontalAlignment="Right" 
          VerticalAlignment="Stretch" 
          Grid.Column="1"  ResizeBehavior="PreviousAndNext"
          Width="5" Background="#FFBCBCBC"/>
    </Grid>

    <Grid Grid.Row="4">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <GridSplitter HorizontalAlignment="Right" 
          VerticalAlignment="Stretch" 
          Grid.Column="1"  ResizeBehavior="PreviousAndNext"
          Width="5" Background="#FFBCBCBC"/>
    </Grid>
</Grid>

enter image description here

Upvotes: 2

Peter
Peter

Reputation: 1687

You can use multiple Grids inside like this:

   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- First Row-->
        <Grid>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>


            <Label Content="Left" Grid.Column="0" />

            <GridSplitter HorizontalAlignment="Right" 
                          VerticalAlignment="Stretch" 
                          Grid.Column="1" 
                          ResizeBehavior="PreviousAndNext"
                          Width="5" 
                          Background="#FFBCBCBC"
                          />

            <Label Content="Right" 
                   Grid.Column="2" 
                   />
        </Grid>



        <GridSplitter HorizontalAlignment="Stretch"
                  ResizeDirection="Rows"
              VerticalAlignment="Stretch" 
              Grid.Column="0"  Grid.Row="1" Grid.ColumnSpan="3" ResizeBehavior="PreviousAndNext"
              Height="5" Background="#FFBCBCBC"/>

        <!-- Second Row -->
        <Grid Grid.Row="2">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>


            <Label Content="Left" 
                   Grid.Column="0" 
                   Grid.Row="2"
                   />

            <GridSplitter HorizontalAlignment="Right" 
                          VerticalAlignment="Stretch" 
                          Grid.Column="1" 
                          Grid.Row="2" 
                          ResizeBehavior="PreviousAndNext"
                          Width="5" 
                          Background="#FFBCBCBC"
                          />

            <Label Content="Right" 
                   Grid.Column="2" 
                   Grid.Row="2" 
                   />

        </Grid>

    </Grid>

In the end you dont want to effect other rows by the GridSplitter - so just use a Grid per row. This is normaly not so good and you would prefer Grid.ColumnSpan and Grid.RowSpan, but in your problem this is the most trivial solution.

Result

Upvotes: 4

Shadowed
Shadowed

Reputation: 966

Solution depends on do you want solution for single problem shown in image or do you want generic solution. For this particular setup, you can define three columns, then for first row, use first column regularly and for second add Grid.ColumnSpan=2 to a child controls. This will merge second and third column. For second row, use Grid.ColumnSpan=3 and all columns will be merged. For second row, use Grid.ColumnSpan=2 for things in first column.

You can use similar approach in different configurations. However, if you want completely generic solution, you can't do it with regular Grid and you would have to implement your own grid control with column definitions for each row and calculating layout of child controls.

Upvotes: 1

Related Questions