RowSpan "Auto" makes two rows merge for WP8.1

501 views Asked by At

I've got a Grid where I've created three rows using column definition. In the first row I've placed a grid with a rectangle and set the Rowspan = 2. In the second I've also got a grid with a rectangle. Instead of the first row just overlapping the second a bit, which is what I wish, They totally overlap, and seems that there is just one row.

Te RowDefinition Height I've set to Auto, because I wish to change the Heights of the rows by clicking a button later on.

Is there a way to avoid the two rows to merge using the Auto Height for RowDefinition?

The Code I've got so far is:

<Page
x:Class="GridRetreatTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GridRetreatTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Height="100" Grid.RowSpan="2">
        <Rectangle Fill="Blue"/>
    </Grid>
    <Grid Grid.Row="1" Height="100">
        <Rectangle Fill="Red"/>
    </Grid>
    <Grid Grid.Row="2" Height="100">
        <Rectangle Fill="Green"/>
    </Grid>
</Grid>

1

There are 1 answers

0
Amit Bhatiya On

try this:

XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Height="100" >
        <Rectangle Fill="Blue"/>
    </Grid>
    <Grid x:Name="grd1" Grid.Row="1" Height="100" Margin="0,-50,0,0">
        <Rectangle Fill="Red"/>
    </Grid>
    <Grid Grid.Row="2" Height="100">
        <Rectangle Fill="Green"/>
    </Grid>
</Grid>
<StackPanel Grid.Row="4">
    <Button Content="click" Click="Button_Click"></Button>
</StackPanel>

CS:

private void Button_Click(object sender, RoutedEventArgs e)
{
    grd1.Margin = new Thickness(0, 0, 0, 0);
    grd1.Height = 300;
}