#456 – An Element in a Grid Can Span Multiple Rows or Columns

You can have child elements in a grid span multiple rows and/or multiple columns using the the Grid.RowSpan and Grid.ColumnSpan properties.

In the example below, the Image spans two rows and two columns and the TextBlock is located in a single row, but spans two columns.

    <Grid DataContext="{Binding GoodMovie}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Source="{Binding Image}" Grid.RowSpan="2" Grid.ColumnSpan="2"
               Width="142" Height="216" Margin="5"
               HorizontalAlignment="Center" VerticalAlignment="Center"/>

        <Label Content="{Binding Title}" FontWeight="Bold" Grid.Row="0" Grid.Column="2"/>
        <Label Content="{Binding Year}" Grid.Row="0" Grid.Column="3"/>

        <TextBlock Text="{Binding Summary}" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"
                   TextWrapping="Wrap" Margin="8"/>

        <Label Content="Director:" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
        <Label Content="{Binding Director}" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left"/>

        <Label Content="Actor:" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Right"/>
        <Label Content="{Binding ActorLead}" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left"/>

        <Label Content="Actress:" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Right"/>
        <Label Content="{Binding ActressLead}" Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left"/>
    </Grid>

You can see things a little better by turning on the grid lines.