Scrollable GridLayout

stan_brstan_br BRMember ✭✭

Hello Guys.

I need to do a layout similar to the attached image.

As you can see, I will have objects stored on a database and I will dynamically load them onto my grid.

The thing is, I'll have more than 50 objects and I don't want them inside the same grid, because they'll be very small if I do that. I need them to scroll. Vertically would be better.

I thought about a ScrollView and a Grid inside but failed attempting to create such thing.

Could you please help to achieve that?

Thank you!

Posts

  • DirkWilhelmDirkWilhelm USMember ✭✭✭✭

    Using a scrollview with a grid inside should work. Show your code that you tried and that failed.

  • stan_brstan_br BRMember ✭✭

    @DirkWilhelm said:
    Using a scrollview with a grid inside should work. Show your code that you tried and that failed.

    Here's the code. I have less objects, but even if I add more, the buttons will get smaller, but no scrolling.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    try with Absolute instead of Star when define Grid's Height and Width

  • stan_brstan_br BRMember ✭✭

    @AlessandroCaliaro said:
    try with Absolute instead of Star when define Grid's Height and Width

    Do you mean specify absolute values? like 200 units? But what about screen resolution differences?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Sorry, not Absolute... Auto...

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Otherwise (as Test) try with Absolute... so we can understand if something changes

  • stan_brstan_br BRMember ✭✭

    @AlessandroCaliaro said:
    Sorry, not Absolute... Auto...

    No worries.
    I tried but the icons just got smaller.

    imgur.com/1KipjTk

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I have done this test

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestRelativeLayout.MyPage2">
        <ContentPage.Content>
            <StackLayout>
            <Label Text = "PAGE2"/>
                <Button Text="Press to open page3" Clicked="Handle_Clicked"/>
                    <ScrollView>
            <Grid x:Name="grid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
    
                <Button HeightRequest = "100" Text="1" Grid.Row="0" Grid.Column="0" />
                <Button HeightRequest = "100" Text="2" Grid.Row="0" Grid.Column="1" />
                <Button HeightRequest = "100" Text="3" Grid.Row="0" Grid.Column="2" />
                <Button HeightRequest = "100" Text="4" Grid.Row="1" Grid.Column="0" />
                <Button HeightRequest = "100" Text="5" Grid.Row="1" Grid.Column="1" />
                <Button HeightRequest = "100" Text="6" Grid.Row="1" Grid.Column="2" />
                <Button HeightRequest = "100" Text="7" Grid.Row="2" Grid.Column="0" />
                <Button HeightRequest = "100" Text="8" Grid.Row="2" Grid.Column="1" />
                <Button HeightRequest = "100" Text="9" Grid.Row="2" Grid.Column="2" />
                <Button HeightRequest = "100" Text="10" Grid.Row="3" Grid.Column="0" />
                <Button HeightRequest = "100" Text="11" Grid.Row="3" Grid.Column="1" />
                <Button HeightRequest = "100" Text="12" Grid.Row="3" Grid.Column="2" />
    
                <Button HeightRequest = "100" Text="13" Grid.Row="4" Grid.Column="0" />
            </Grid>
        </ScrollView>
                </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    It works. I have a scrollview with buttons... the problem is that when I scroll, the ScrollView goes OVER the first "Press to Open Page3" button... I open this page inside a navigationpage... maybe this a problem... I try to open it without a navigation page

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    The error exists...

  • stan_brstan_br BRMember ✭✭

    @AlessandroCaliaro said:
    The error exists...

    Alessandro,

    Worked perfectly for me, look:
    imgur.com/FUbNwbV
    Maybe your emulator has some different display config (?)

    Btw, thank you for your help on that. That's what I needed.
    Just a question, that was only possible because of the StackLayout you added?

    Do you know how can I dynamically poopulate these buttons? I'll need to do a code-behind logic to create buttons, then show them on the ContentPage, right?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    Good

    Maybe the emulator

    You can try with https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView or create your grid dinamically using code instead of xaml
  • docen67docen67 Member ✭✭

    @stan_br said:

    @AlessandroCaliaro said:
    The error exists...

    Alessandro,

    Worked perfectly for me, look:
    imgur.com/FUbNwbV
    Maybe your emulator has some different display config (?)

    Btw, thank you for your help on that. That's what I needed.
    Just a question, that was only possible because of the StackLayout you added?

    Do you know how can I dynamically poopulate these buttons? I'll need to do a code-behind logic to create buttons, then show them on the ContentPage, right?

    I've tried this with a smaller resolution emulator and tthe error persist with the scrolling going over the other items,can you help me with that?.

Sign In or Register to comment.