Xamarin maximum grid row/ column definitions

Question

I've only started playing with xamarin recently but I'm making a roguelike using xamarin and I had the idea of using a grid for the player map (each X Y position in the grid would be representing the randomly generated map) I've hit a snag though in that putting things any thing over the 55th column seems to push them off the screen (See image below)

Here's my code so far:

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",
               HorizontalOptions = LayoutOptions.Center,
               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
           }, 0, 1, 1, 2);
           grid.Children.Add(new Label
           {
               Text = "Row 1, Column 0",
               HorizontalOptions = LayoutOptions.Center,
               VerticalOptions = LayoutOptions.Center
           }, 0, 1, 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
           }, 1, 2, 1, 2);
           grid.Children.Add(new Label
           {
               Text = "Row1, Column 1",
               HorizontalOptions = LayoutOptions.Center,
               VerticalOptions = LayoutOptions.Center
           }, 1, 2, 1, 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",
               HorizontalOptions = LayoutOptions.Center,
               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; 

So I guess the question is a few folds, how can I "Zoom" out on the grid view to see the other cells of the grid? Additionally, am I even going about this the right way ? or is there a better approach that using a grid?

Answer 1

You should warp the content into a ScrollView and set Content = scrollView, then you can scroll to see all the elements:

    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;
    }