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
