CODEWITHSUNDEEP
gridviewxamarin.formscolumnspan
Midhun Kumar
Midhun Kumar

Reputation: 577

Odd behaviour of ColumnSpan in Xamarin Forms

I have a content view with a grid defined inside. The grid has three rows and two columns. I have an image that should cover the both the columns in the first row , ie column span =2 but setting the column span as 2 doesn't cover the whole area and setting it as 3 does the job. Is it because of any error in the way i have created the grid. Below is the whole content view.

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="GridView.HomeSliderComponent">
    <ContentView.Content>
        <Grid BackgroundColor="Black">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Image Source="{Binding Cover}" Aspect="AspectFill" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"/>
            <Label Text="{Binding Title}" Grid.Row="1" Grid.Column="0" Margin="10,0,0,0" VerticalOptions="Center"/>
            <Label Text="{Binding Description}" Grid.Row="2" Grid.Column="0" VerticalOptions="Center" Margin="10,0,0,0"/>
            <Button Text="Resume Course" TextColor="#EBB53E" Grid.Row="2" Grid.Column="2" VerticalOptions="End" HorizontalOptions="End" Margin="5,5" BackgroundColor="Black" BorderColor="#EBB53E" BorderRadius="2" BorderWidth="2"/>
        </Grid>

    </ContentView.Content>
</ContentView>

Upvotes: 1

Views: 539

Answers (1)

Paul Kertscher
Paul Kertscher

Reputation: 9713

The issue is, that your Button has Grid.Column="2", which implictly creates a third column. Hence your grid has 3 columns and you need Grid.ColumnSpan="3" in order to span the Image over the whole width.

Upvotes: 2

Related Questions