CODEWITHSUNDEEP
wpfxamllayoutgrid
user3196085
user3196085

Reputation:

How to define that layout in XAML

I expierience problem in defining(using Grid) layout which looks like that:

enter image description here

I know how to get simple layout which looks like that:

enter image description here

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="8*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
</Grid>

How to achieve that first layout?

Upvotes: 0

Views: 203

Answers (2)

har07
har07

Reputation: 89325

You can't achieve that with one Grid. Create a Grid with 2 columns and 3 rows. Then put another Grid in row 1 column 1 of the outer Grid. For example (also demonstrating how to put control in each cell) :

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="3*" />
        <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="4*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Row="1" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label >Row 1 Column 1</Label>
        <Label Grid.Row="1">Row 2 Column 1</Label>
    </Grid>
    <Label >Row 0 Column 0</Label>
    <Label Grid.Row="1">Row 1 Column 0</Label>
    <Label Grid.Row="2">Row 2 Column 0</Label>
    <Label Grid.Column="1">Row 0 Column 1</Label>
    <Label Grid.Column="1" Grid.Row="2">Row 3 Column 1</Label>
</Grid>

UPDATE :

Actually you can also achieve that with one Grid as suggested by @Chris in comment. Create a Grid with 2 columns and 4 rows. Then set UI control in row 1 column 0 to take up space for two rows (set Grid.RowSpan="2"). This is the example :

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="4*" />
    </Grid.ColumnDefinitions>
    <Label >Row 0 Column 0</Label>
    <Label Grid.Row="1" Grid.RowSpan="2">Row 1 Column 0</Label>
    <Label Grid.Row="3">Row 2 Column 0</Label>
    <Label Grid.Column="1">Row 0 Column 1</Label>
    <Label Grid.Column="1" Grid.Row="1">Row 1 Column 1</Label>
    <Label Grid.Column="1" Grid.Row="2">Row 2 Column 1</Label>
    <Label Grid.Column="1" Grid.Row="3">Row 3 Column 1</Label>
</Grid>

Upvotes: 3

Stojdza
Stojdza

Reputation: 445

You can do it like this:

<Grid>        
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="4*" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
      <Grid.RowDefinitions>
         <RowDefinition Height="50">
         <RowDefinition Height="70">
         <RowDefinition Height="300">
      </Grid.RowDefinitions>
    </Grid>
    <Grid Grid.Column="1">
       <Grid.RowDefinitions>
         <RowDefinition Height="50">
         <RowDefinition Height="50">
         <RowDefinition Height="20">
         <RowDefinition Height="300">
      </Grid.RowDefinitions>
    </Grid>
</Grid>

Just change the height and width as you want.

Upvotes: 0

Related Questions