Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Masonry list style in Xamarin

ErdoganErdogan Member ✭✭✭
edited May 18 in Xamarin.Forms

I need to list the announcements on a content page just like masonry style (https://halcyon-theme.tumblr.com/) but I couldn't be successful on it. My problem is that the Scrollview doesn't cover whole the page when I use the Parent Stacklayout's Vertical alignment option set as FillAndExpand. But if I set the Scrollview and Parent StackLayout as static height value, It's okay but due to per item's height will change, I can't use it that's the way as you guess.

 <StackLayout x:Name="stckParent" Orientation="Vertical" VerticalOptions="FillAndExpand">
                    <Grid VerticalOptions="FillAndExpand" RowSpacing="0" ColumnSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>

                        <StackLayout x:Name="stckLeft" Grid.Column="0" Margin="0,0,2,0"
                                  Orientation="Vertical" VerticalOptions="FillAndExpand">
                        </StackLayout>

                        <StackLayout x:Name="stckRight" Grid.Column="1" Margin="2,0,0,0"
                                  Orientation="Vertical" VerticalOptions="FillAndExpand">
                        </StackLayout>

                    </Grid>
                </StackLayout>

</ScrollView>


public MainPage()
        {
            InitializeComponent();

            var list = new ObservableCollection<Announcement>
            {
                new Announcement
                {
                    ID = 1,
                    Title = "Yedek parça siparişlerinizde %22' ye varan indirim!",
                    ImagePath = "https://image5.sahibinden.com/photos/08/54/18/x5_719085418j7p.jpg",
                    IsActive = true,
                    CreateDate = DateTime.Now,
                },
                new Announcement
                {
                    ID = 2,
                    Title = "Fren Balataları Hangi Sıklıkla Değiştirilmelidir?",
                    ImagePath = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTJzQfduSrJ3Nh7SHzGSGrCmTnWses4AcfuRSnU7hX4y9XN4TSU&usqp=CAU",
                    IsActive = true,
                    CreateDate = DateTime.Now,
                }
            };

            DeviceHelper helper = DependencyService.Get<IDeviceHelper>().GetDevice();

            double height = 0;

            for (int m = 0; m < 6; m++)
            {
                for (int i = 0; i < list.Count; i++)
                {

                    Frame frame = new Frame
                    {
                        Padding = new Thickness(0, 0, 0, 0)
                    };

                    // Stack
                    StackLayout stack = new StackLayout
                    {
                        Margin = new Thickness(10),
                    };

                    // Image
                    Image image = new Image
                    {
                        Source = list[i].ImagePath,
                        HorizontalOptions = LayoutOptions.FillAndExpand,
                        VerticalOptions = LayoutOptions.FillAndExpand
                    };

                    // Title
                    Label title = new Label
                    {
                        Text = list[i].Title,
                        Margin = new Thickness(0, 6, 0, 0),
                        FontSize = 13
                    };

                    // Date
                    Label date = new Label
                    {
                        Text = list[i].CreateDate.ToString().Substring(0, 10), // temporary workaround
                        Margin = new Thickness(0, 6, 0, 0),
                        TextColor = Color.Gray,
                        FontSize = 11
                    };

                    stack.Children.Add(image);
                    stack.Children.Add(title);
                    stack.Children.Add(date);

                    frame.Content = stack;


                    if (i % 2 == 0)
                    {
                        stckLeft.Children.Add(frame);
                    }
                    else
                    {
                        stckRight.Children.Add(frame);

                        SizeRequest columnSizeRequest = frame.Measure(600, 800);
                        height += columnSizeRequest.Request.Height * 6; // *6 is estimated height, what should be the solution?
                    }
                }
            }
            stckLeft.HeightRequest = height;
            stckRight.HeightRequest = height;

            scrList.HeightRequest = helper.ScreenHeight - 100;

        }

Why Scrolview doesn't fill the whole page?
What is the best practice to able to do the masonry-style page?

How can I obtain a frame size that just bound? {
SizeRequest columnSizeRequest = frame.Measure(300, 400); // the result is always 41, It's not make sense..
height += columnSizeRequest.Request.Height * 6;

}

except for estimated height value, not bad :)

GitHub link; https://github.com/Erdogan34/Test-Masonry

thanks

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    I can't be able to run the project because it lost the reference of Model folder , please check it and upload again .

  • ErdoganErdogan Member ✭✭✭

    It's added to the directory.

    However, I guess, the FlexLayout can do this. Is there a sample that you know?

  • ErdoganErdogan Member ✭✭✭

    Flex-Layout sample;

    How can I set the green box to the top?

    <FlexLayout Direction="Row" Wrap="Wrap" AlignContent="Start"
                                    JustifyContent="Start" AlignItems="Start">
    
                            <Frame BackgroundColor="Red" Margin="4,4">
                                <StackLayout WidthRequest="140">
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                </StackLayout>
                            </Frame>
    
                            <Frame BackgroundColor="Blue" Margin="4,4">
                                 <StackLayout WidthRequest="140">
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                </StackLayout>
                            </Frame>
    
                            <Frame BackgroundColor="Green" Margin="4,4" FlexLayout.Grow="1">
                                 <StackLayout WidthRequest="140">
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                </StackLayout>
                            </Frame>
    
                            <Frame BackgroundColor="Yellow" Margin="4,4" FlexLayout.Grow="1">
                                 <StackLayout WidthRequest="140">
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                    <Label Margin="0,10" Text="Deneme"/>
                                </StackLayout>
                            </Frame>
    
                        </FlexLayout>
    

Sign In or Register to comment.