Hi, I need to create a Grid in a scroll view. I created a version for the portrait and landscape mode. It should be scrollable in the portrait mode, but not in the landscape mode. The problem is if I add the scrollview it doesn't look like expected in landscape mode. Here is a gif with an example:
![]()
Here is my xaml code:
<ContentPage.Content>
<ScrollView>
<Grid x:Name="myLayout" ColumnSpacing="0" RowSpacing="0">
<BoxView x:Name="box1" BackgroundColor="Green"/>
<BoxView x:Name="box2" BackgroundColor="Yellow"/>
<BoxView x:Name="box3" BackgroundColor="Blue"/>
<BoxView x:Name="box4" BackgroundColor="Gray"/>
</Grid>
</ScrollView>
</ContentPage.Content>
And here the C# code, which handling the Orientation change:
public partial class myPage : ContentPage
{
private double width,
height;
public myPage()
{
InitializeComponent();
width = this.Width;
height = this.Height;
}
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
if (this.width != width || this.height != height)
{
this.width = width;
this.height = height;
UpdateLayout();
}
}
private void UpdateLayout()
{
myLayout.ColumnDefinitions.Clear();
myLayout.RowDefinitions.Clear();
myLayout.Children.Clear();
if (width > height) SetLandscapeLayout();
else SetPortraitLayout();
}
private void SetPortraitLayout()
{
myLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
myLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
myLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
myLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
myLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
myLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
myLayout.Children.Add(view: box1, left: 0, top: 0);
box1.HeightRequest = box1.Width;
myLayout.Children.Add(view: box2, left: 1, top: 0);
box2.HeightRequest = box2.Width;
myLayout.Children.Add(view: box3, left: 2, top: 0);
box3.HeightRequest = box3.Width;
myLayout.Children.Add(view: box4, left: 3, top: 0);
box4.HeightRequest = box4.Width;
}
private void SetLandscapeLayout()
{
myLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
myLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
myLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
myLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
myLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
myLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
myLayout.Children.Add(view: box1, left: 0, top: 0);
box1.WidthRequest = box1.Height;
myLayout.Children.Add(view: box2, left: 0, top: 1);
box2.WidthRequest = box2.Height;
myLayout.Children.Add(view: box3, left: 0, top: 2);
box3.WidthRequest = box3.Height;
myLayout.Children.Add(view: box4, left: 0, top: 3);
box4.WidthRequest = box4.Height;
}
}
Thanks in advance.
