CODEWITHSUNDEEP
xamlxamarinxamarin.formsxamarin.ios
Julien Cambier
Julien Cambier

Reputation: 61

Why does my Grid have some internal spacing?

I am building my first iPhone app with Xamarin.Forms 5.0.0.

I am using a Grid inside a CollectionView. But there is some internal spacing even though I set the ColumnSpacing and RowSpacing to 0. This is all inside a ContentPage that I use inside a Shell.

This is my XAML:

    <CollectionView ItemsSource="{Binding Users}" BackgroundColor="Red">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:UserModel">
                <Grid BackgroundColor="Green" ColumnSpacing="0" RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="LightBlue"/>
                    <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="LightBlue"/>
                    <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="LightBlue"/>
                    <BoxView Grid.Row="1" Grid.Column="1" BackgroundColor="LightBlue"/>
                    <Label Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="1" TextColor="Black"/>
                    <Label Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="2" TextColor="Black"/>
                    <Label Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="3" TextColor="Black"/>
                    <Label Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="4" TextColor="Black"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

As you can see the spacing is green which indicates that there is no space between the collection items but inside the grid itself. There is also a small line the the middle that I only see on my device and not in the simulator. Is there a tool where I can analyze the XAML in detail to see where it comes from? For web development I could simply use the inspect element from the DEV tools. Is there something similar for Xamarin XAML?

And this is the result on my iPhone: iPhone

And here is the result in the simulator: enter image description here

Upvotes: 2

Views: 432

Answers (1)

Julien Cambier
Julien Cambier

Reputation: 61

As suggested by @ToolmakerSteve.

I played a bit with negative margins and paddings and this did it for me:

<Grid ColumnSpacing="0" RowSpacing="0" Padding="-1, -1, 0, 0">

I still wonder why this is needed. There must be something where the padding is 1,1,0,0 or something that adds it by default. But for now my issue is fixed.

Upvotes: 2

Related Questions