Xamarin.Forms: Setting Rowspan programmatically

Question

I have the following grid:

            <!--MainGrid-->
            <Grid Grid.Row="2" x:Name="maingrid_piccat">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

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

                    <ImageButton
                         Aspect="AspectFit"
                         Grid.Column="1"
                         Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

                    <Picker x:Name="picker_maincat_pickcate" 
                            Grid.Column="1"
                            Title="Hauptkategorie"
                            FontFamily="arial"
                            BackgroundColor="#00000000"
                            TextColor="#272727"
                            HorizontalOptions="Center" 
                            VerticalOptions="Center">
                        <Picker.Items>
                            <x:String>Cat 1</x:String>
                            <x:String>Cat 2</x:String>
                            <x:String>Cat 3</x:String>
                            <x:String>Cat 4</x:String>
                        </Picker.Items>
                        </Picker>

                </Grid>

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

                    <ImageButton
                         Aspect="AspectFit"
                         Grid.Column="1"
                         Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

                    <Picker x:Name="picker_subcat1_pickcate" 
                            Grid.Column="1"
                            Title="Unterkategorie 01"
                            FontFamily="arial"
                            BackgroundColor="#00000000"
                            TextColor="#272727"
                            HorizontalOptions="Center" 
                            VerticalOptions="Center">
                        <Picker.Items>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                        </Picker.Items>
                    </Picker>

                </Grid>

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

                    <ImageButton
                         Aspect="AspectFit"
                         Grid.Column="1"
                         Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

                    <Picker x:Name="picker_subcat2_pickcate" 
                            Grid.Column="1"
                            FontFamily="arial"
                            Title="Unterkategorie 02"
                            BackgroundColor="#00000000"
                            TextColor="#272727"
                            HorizontalOptions="Center" 
                            VerticalOptions="Center">
                        <Picker.Items>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                        </Picker.Items>
                    </Picker>

                </Grid>

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

                    <ImageButton
                         Aspect="AspectFit"
                         Grid.Column="1"
                         Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

                    <Picker x:Name="picker_subcat3_pickcate" 
                            Grid.Column="1"
                            FontFamily="arial"
                            BackgroundColor="#00000000"
                            TextColor="#272727"
                            Title="Unterkategorie 03"                                
                            HorizontalOptions="Center" 
                            VerticalOptions="Center">
                        <Picker.Items>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                            <x:String>Subcat yx</x:String>
                        </Picker.Items>
                    </Picker>

                </Grid>

                <Grid Grid.Row="4" x:Name="row4_piccat">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="4*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <ImageButton
                        x:Name="btn_dummy_piccat"
                         Aspect="AspectFit"
                         Grid.Column="1"
                         Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

                    <Entry x:Name="entry_name_pickcat" 
                            Grid.Column="1"
                            FontFamily="arial"
                           MaxLength="15"
                           Placeholder="Titel der Anzeige" 
                            BackgroundColor="#00000000"
                            TextColor="#272727"
                            HorizontalOptions="Center" 
                            VerticalOptions="Center">
                    </Entry>

                </Grid>

                <Grid Grid.Row="5" x:Name="row5_piccat">
                    <Grid.ColumnDefinitions >
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="4*" />
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <ImageButton
                         Aspect="AspectFit"
                         x:Name="btn_dummy_piccat2"
                         Grid.Column="1"
                         Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

                    <Entry x:Name="entry_descri_pickcate" 
                            Grid.Column="1"
                            FontFamily="arial"
                           MaxLength="50"
                           Placeholder="Kurzbeschreibung" 
                            BackgroundColor="#00000000"
                            TextColor="#272727"
                            HorizontalOptions="Center" 
                            VerticalOptions="Center">
                    </Entry>

                </Grid>

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

                    <ImageButton
                        Margin="10,10,10,10"
                        Grid.Column="1"
                        Aspect="AspectFit"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                x:Name="name_btnfoto_pickcat"
                BackgroundColor="#00000000"
                Source="fotobutton.png" />



                </Grid>

            </Grid>

It is working fine, but now I want to alter the last two rows. The second to last row is now supposed to have a text in there that takes the size of the last two rows. But I dont seem to be able to make the second to last row span into the last row. This is the result atm:

You can see, the content here is just inside the one row, but i want it to overlap into the second row aw well. This is the code currently:

private void SetLayoutForTakers()
{
    btn_dummy_piccat2.IsVisible = false;
    entry_descri_pickcate.IsVisible = false;



    Grid grid = new Grid(); //Neues Grid
    BoxView bx = new BoxView();
    Label lb = new Label();


    //Label Properties
    lb.Text = "Tipp: Sie können auch nur nach Titeln suchen, oder nach bestimmten Titeln in einer oder mehrerer Kategorien!";
    lb.TextColor = Xamarin.Forms.Color.White;
    lb.FontSize = 12;
    lb.FontFamily = "arial";

    bx.Color = Xamarin.Forms.Color.Red;

    grid.Children.Add(bx);
    grid.Children.Add(lb);
    row5_piccat.Children.Add(grid,1,1);

}

So how can I achieve my goal? In the end, the red boxview is supposed to take the place of two rows (the last two rows) rn, it is only in one.

All needs to be done programatically :-).

THank you!

Answer 1

Grid.Children.Add has an overload that lets you specify the span values

public void Add (Xamarin.Forms.View view, int left, int right, int top, int bottom);

left Int32

The left edge of the column span. Must be greater than or equal to 0.

right Int32

The right edge of the column span. Must be greater than left. The view won't occupy this column, but will stop just before it.

top Int32

The top edge of the row span. Must be greater than or equal to 0.

bottom Int32

The bottom edge of the row span. Must be greater than top.