Xamarin最大网格行/列定义

问题描述

我最近才刚开始使用xamarin，但是我正在使用xamarin进行类似rogue的游戏，并且我想到了将网格用于玩家地图（网格中的每个XY位置将代表随机生成的地图）尽管遇到了麻烦，但在第55列上放置任何东西似乎都将它们推离了屏幕（请参见下图）

到目前为止，这是我的代码：

StackLayout stackLayout = new StackLayout() { VerticalOptions = Layoutoptions.FillAndExpand };
           Grid grid = new Grid
           {
               VerticalOptions = Layoutoptions.FillAndExpand,HorizontalOptions = Layoutoptions.FillAndExpand,};
           stackLayout.Children.Add(grid);

           for (int i = 0; i < 300; i++)
           {
               grid.RowDeFinitions.Add(new RowDeFinition { Height = GridLength.Auto });
               grid.ColumnDeFinitions.Add(new ColumnDeFinition { Width = GridLength.Auto });
           }
           

           // Row 0
           // The BoxView and Label are in row 0 and column 0,and so only needs to be added to the
           // Grid.Children collection to get default row and column settings.
           grid.Children.Add(new BoxView
           {
               Color = Color.Green
           });
           grid.Children.Add(new Label
           {
               Text = "Row 0,Column 0",HorizontalOptions = Layoutoptions.Center,VerticalOptions = Layoutoptions.Center
           });

           // This BoxView and Label are in row 0 and column 1,which are specified as arguments
           // to the Add method.
           grid.Children.Add(new BoxView
           {
               Color = Color.Blue
           },55,0);
           grid.Children.Add(new Label
           {
               Text = "Row 0,Column 1",VerticalOptions = Layoutoptions.Center
           },1,0);

           // Row 1
           // This BoxView and Label are in row 1 and column 0,which are specified as arguments
           // to the Add method overload.
           grid.Children.Add(new BoxView
           {
               Color = Color.teal
           },2);
           grid.Children.Add(new Label
           {
               Text = "Row 1,2); // These arguments indicate that that the child element goes in the column starting at 0 but ending before 1.
                           // They also indicate that the child element goes in the row starting at 1 but ending before 2.

           grid.Children.Add(new BoxView
           {
               Color = Color.Purple
           },2,2);
           grid.Children.Add(new Label
           {
               Text = "Row1,2);

           // Row 2
           // Alternatively,the BoxView and Label can be positioned in cells with the Grid.SetRow
           // and Grid.SetColumn methods.
           BoxView BoxView = new BoxView { Color = Color.Red };
           Grid.SetRow(BoxView,2);
           Grid.SetColumnSpan(BoxView,2);
           Label label = new Label
           {
               Text = "Row 2,Column 0 and 1",VerticalOptions = Layoutoptions.Center
           };
           Grid.SetRow(label,2);
           Grid.SetColumnSpan(label,2);

           grid.Children.Add(BoxView);
           grid.Children.Add(label);

           Title = "Basic Grid demo";
           Content = grid; 

所以我想问题是几折，如何在网格视图上“缩小”以查看网格的其他单元格？另外，我什至会以这种正确的方式走下去吗？还是有使用网格的更好方法？

解决方法

您应将内容扭曲到ScrollView中并设置Content = scrollView，然后滚动查看所有元素：

    public MainPage()
    {
        InitializeComponent();


        StackLayout stackLayout = new StackLayout() { VerticalOptions = LayoutOptions.FillAndExpand };


        Grid grid = new Grid
        {
            VerticalOptions = LayoutOptions.FillAndExpand,HorizontalOptions = LayoutOptions.FillAndExpand,};
        stackLayout.Children.Add(grid);

        //......
        
        grid.Children.Add(boxView);
        grid.Children.Add(label);

        Title = "Basic Grid demo";

        //warp the content into a ScrollView 
        ScrollView scrollView = new ScrollView { Content = stackLayout };
        scrollView.Orientation = ScrollOrientation.Both;

        Content = scrollView;
    }