CODEWITHSUNDEEP
xamarinxamarin.forms
senseiwa
senseiwa

Reputation: 2499

Scrollable grid in Xamarin

I have to implement a scrollable grid of images in Xamarin Forms, the grid is n x 2, so two images by side. Since I have no idea how to combine a ScrollView with a Grid, I tried this (all my controls are inside a grid, but this is not relevant):

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker">
        <StackLayout HorizontalOptions="Fill" Orientation="Horizontal">
            <Image Source="test.png" HorizontalOptions="Start"/>
            <Image Source="test.png" HorizontalOptions="End"/>
        </StackLayout>
        <!-- put several of these here -->
    </StackLayout>
</ScrollView>

But the results are far from being acceptable:

stack

I have tried several variations, but it seems that StackLayout won't obey the boundaries of its parent.

Just for fun I've tried a Grid without any success since it adds a lot of space between the grids (and I don't know why):

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker">                    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="test.png" Grid.Row="0" Grid.Column="0"/>
            <Image Source="test.png" Grid.Row="0" Grid.Column="1"/>
        </Grid>
        <!-- put several of these here --> 
    </StackLayout>
</ScrollView>

grid

How can I achieve a simple scrollable grid in Xamarin Forms? This is my hand-drawn objective:

objective

Any hints are welcome!

Upvotes: 1

Views: 8499

Answers (2)

Tolga Kartal
Tolga Kartal

Reputation: 633

You should use a ListView for this task. Otherwise there is a lot things you have to deal on your own. Here is a link where I hope you find exactly the layout you want: https://github.com/02047788a/TwoColumnListView

Upvotes: 1

Bruno Caceiro
Bruno Caceiro

Reputation: 7189

The spacing between the elements, is according to the StackLayout Spacing, which defines how each element added will be spaced.

Another thing you have to take into consideration are the VerticalOptions, which will decide the position of the elements, see the bellow example:

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker" VerticalOptions="Start" Padding="0" Spacing="0">                    
        <Grid VerticalOptions="StartAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="test.png" Grid.Row="0" Grid.Column="0"/>
            <Image Source="test.png" Grid.Row="0" Grid.Column="1"/>
        </Grid>
        <!-- put several of these here --> 
    </StackLayout>
</ScrollView>

Upvotes: 0

Related Questions