mobile - 如何创建带有正方形的响应式网格？

Question

我目前正在创建一个充满按钮的网格。现在我希望这个网格能够响应并且按钮是方形的。我想要创建的东西看起来像 iOS 或 Android 主屏幕(只是按钮)。

Grid grid = new Grid
        {

            HorizontalOptions = LayoutOptions.StartAndExpand,
            RowSpacing = 15,
            ColumnSpacing = 15,
            ColumnDefinitions = 
            {
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
            }
        };

        for (int i = 0; i < 12; i++)
        {
            MonitorButton button = new MonitorButton();
            grid.Children.Add(button, i % 3, i / 3);
        }

        this.Content = new ScrollView
        {
            Padding = new Thickness(15),
            Orientation = ScrollOrientation.Vertical,
            Content = grid
        };

所以我在这里创建了一个包含 3 列的网格，其中填充了 12 个 MonitorButton(背景上带有图像的按钮)。看起来不错.. 现在当我在横向模式下打开屏幕时，屏幕上充满了矩形，因为列数仍然相同...... 我该如何解决这个问题？我希望有某种动态的可能性(例如:itemscontrol @XAML)。

Answer 1

当您旋转屏幕时，当前页面会自行调整大小，因此它会调用页面中的 OnSizeRequest 方法。如果重写该方法，则可以同时检测大小和方向。

你的页面.cs || YourPage.xaml.cs

protected override SizeRequest OnSizeRequest(double widthConstraint, double heightConstraint)
{
    if(widthConstraint>heightConstraint)
    {
        //landscape mode
        //set your grid row & columndefinitions
    }
    else
    {
        //portait mode
        //set your grid row & columndefinitions
    }
    return base.OnSizeRequest(widthConstraint, heightConstraint);
}