Markus
Markus

Reputation: 4577

Stretched Splitter does not work

I have a (simplified) 2x2 Grid with three controls inside. The left control strechtes over both rows.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <GridSplitter Grid.Row="0" Grid.Column="1" Height="4" Background="Gray"
                  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"></GridSplitter>
    <GridSplitter Grid.Row="0" Grid.Column="1" Width="4" Background="Gray" Grid.RowSpan="2"
                  HorizontalAlignment="Left" VerticalAlignment="Stretch"></GridSplitter>
    <!-- Simplified content -->
    <Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">Content</Button>
    <Button Grid.Row="0" Grid.Column="1">Content</Button>
    <Button Grid.Row="1" Grid.Column="1">Content</Button>
</Grid>

I can't figure out why these splitters do not work.

Upvotes: 4

Views: 223

Answers (2)

Rohit Vats
Rohit Vats

Reputation: 81253

This one works for me -

  <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <GridSplitter Grid.Row="1" Grid.Column="2" Height="4" Background="Gray"
                      HorizontalAlignment="Stretch" VerticalAlignment="Center"></GridSplitter>
            <GridSplitter Grid.Row="0" Grid.Column="1" Width="4" Background="Gray" Grid.RowSpan="3"
                      HorizontalAlignment="Center" VerticalAlignment="Stretch"></GridSplitter>
            <Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="3">Content</Button>
            <Button Grid.Row="0" Grid.Column="2">Content</Button>
            <Button Grid.Row="2" Grid.Column="2">Content</Button>       

        </Grid>

Upvotes: 1

Jens
Jens

Reputation: 368

I suggest to define the GridSplitter behind the content

<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">Content</Button>
<Button Grid.Row="0" Grid.Column="1">Content</Button>
<Button Grid.Row="1" Grid.Column="1">Content</Button>
<GridSplitter Grid.Row="0" Grid.Column="1" Height="4" Background="Gray"
              HorizontalAlignment="Stretch" VerticalAlignment="Bottom"></GridSplitter>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="4" Background="Gray" Grid.RowSpan="2"
              HorizontalAlignment="Left" VerticalAlignment="Stretch"></GridSplitter>

Upvotes: 4

Related Questions