Contenedores

Resumen

Los contenedores nos ayudan a organizar y acomodar en pantalla los elementos visuales. Estos controles heredan de la clase Layout.

Los más utilizados son

StackLayout
Grid
FlexLayout

El permite apilar los elementos hijos de manera vertical u horizontal seg[un se haya definido la propiedad Orientation.

El contenedor es similar a una tabla, organizada en filas y columnas. Es el más flexible de todos los contenedores. El tamaño de filas y columnas puede ser uno de los siguientes: Fijo, Automático y Proporcional.

Lucas Perera Montanari

student•

Algo asi estaría bien?

Alfonso Bastias

student•

Nice and Clean your Code!!!

Paulina Zoffoli

company_admin•

No me explico algo, ¿Por qué quedan esas líneas negras si es que seteamos 9 boxview de color blanco? ¿No debería quedar todo completamente blanco? ¿Cuanto es el margen que le falta a los boxview para dejar cada columna y fila del grid completamente blanco?

Sergio Castro

student•

Yo cree uno dinamico, para poder agregar y quitar columnas/filas a gusto:

xaml

  <Grid x:Name="grid"
          BackgroundColor="Gray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
    </Grid>

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            var cols = grid.ColumnDefinitions.Count;
            var rows = grid.RowDefinitions.Count;

            for (int col = 0; col < cols; col++)
            {
                for (int row = 0; row < rows; row++)
                {
                    var newButton = new Button();
                    newButton.Clicked += OnClicked;
                    newButton.BackgroundColor = Color.White;

                    Grid.SetColumn(newButton, col);
                    Grid.SetRow(newButton, row);
                    grid.Children.Add(newButton);
                }
            }
        }

        private void OnClicked(object sender, EventArgs e)
        {
            var currentButton = sender as Button;
            currentButton.BackgroundColor = Color.Red;
            currentButton.Clicked -= OnClicked;
        }
    }

Néstor Miguel González Flores

student•

Hola buenas tardes,
¿Cómo hago para probar los cambios visuales sin tener que estar ejecutando la aplicación por cada cambio?

RODRIGO DIAZ CONCHA

teacher•

Hola @nestormgflores. Hoy en día, no hay soporte WYSIWYG (siglas en inglés de "What you see, is what you get). Lo que comenta @josearias210 te puede servir pero hasta cierto punto, ya que Xamarin Live Player no soporta bibliotecas de terceros. Por ejemplo, si en tu aplicación estás referenciando controles de Telerik o algún framework como Prism, etc. no funcionaría.

Usuario anónimo

user•

El visual studio esta en el menu View-> Others-> Xamarin.Forms Previewer, que hace exactamente lo que necesitas.

Montano Sarmiento

student•

mas Simple

public MainPage()
        {
            InitializeComponent();

            Button newbutton;
            for (int i = 0; i <= 2; i++)
            {
                for (int col = 0; col <= 2; col++)
                {
                    newbutton = new Button();
                    newbutton.SetValue(Grid.RowProperty, i);
                    newbutton.SetValue(Grid.ColumnProperty, col);
                    newbutton.Clicked += Newbutton_Clicked;
                    newbutton.BackgroundColor = Color.White; 
                    miGrid.Children.Add(newbutton);
                }
            }
        }

        private void Newbutton_Clicked(object sender, EventArgs e)
        {
            var thebutton = sender as Button;
            var row = Grid.GetRow(thebutton);
            var col = Grid.GetColumn(thebutton);

            BoxView newbox = new BoxView();
            newbox.SetValue(Grid.RowProperty, row);
            newbox.SetValue(Grid.ColumnProperty, col);
            newbox.Color = Color.Red;
            miGrid.Children.Add(newbox);
        }

Santiago Dolores

student•

Les comparto mi solución:

file xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TestGato" x:Class="TestGato.MainPage">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        
        <Button Clicked="Handle_Clicked" Text="?" FontSize="Large" FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="0" Grid.Column="0" />
        <Button Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="0" Grid.Column="1" />
        <Button Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="0" Grid.Column="2" />
        
        <Button Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0" />
        <Button Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="1" Grid.Column="1" />
        <Button  Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="1" Grid.Column="2" />
        
          
        <Button Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="2" Grid.Column="0" />
        <Button  Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="2" Grid.Column="1" />
        <Button  Clicked="Handle_Clicked" Text="?"  FontSize="Large"  FontAttributes="Bold" TextColor="Black" BackgroundColor="Yellow" Grid.Row="2" Grid.Column="2" />
            
    </Grid>
</ContentPage>

file xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TestGato
{
    public partial class MainPage : ContentPage
    {
        String token = "X";
        void Handle_Clicked(object sender, System.EventArgs e)
        {
            string valor = ((Button)sender).Text;
            if (valor != "X" && valor != "Y")
            {
                ((Button)sender).Text = getToken();
                ((Button)sender).BackgroundColor = Color.FromHex("#f8f9f9");
            }

        }


        public String getToken()
        {

            if (token == "X")
            {
                token = "Y";
            }
            else
            {
                token = "X";
            }
            return token;
        }

        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Nelson González

student•

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Totito"
             x:Class="Totito.MainPage">
    <Grid x:Name="MainGrid">
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

    </Grid>
  
</ContentPage>

MainPage.xaml.cs

using System;
using Xamarin.Forms;

namespace Totito
{
    public partial class MainPage : ContentPage
    {
        bool turno;
        public MainPage()
        {
            InitializeComponent();

            for (int i = 0; i< 3; i++) //columna
            {
                for (int j= 0; j < 3; j++) //fila
                {
                    //se crea el botón
                    Button btn = new Button();
                    btn.BackgroundColor = Color.White;
                    btn.BorderColor = Color.Black;

                    //se agrega el manejador del evento click
                    btn.Clicked += Button_Clicked;

                    //se agrega el botón al grid y se coloca en la celda apropiada
                    MainGrid.Children.Add(btn);
                    Grid.SetColumn(btn, i);
                    Grid.SetRow(btn, j);                    
                }
            }
            turno = false;
        }
        
        private void Button_Clicked(object sender, EventArgs e)
        {
            Button boton = (sender as Button);

            Color color = Color.White;
            
            //se selecciona el color a mostrar en el cuadro en base al jugador en turno 
            //(Jugador 1: AZUL, jugador 2: AMARILLO)            
            if (boton.BackgroundColor.Equals(Color.White))                
                color = turno ? Color.Yellow : Color.Blue;

            //se aplica el color al botón
            boton.BackgroundColor = color;

            //se cambia de turno
            turno = !turno;
        }
        
    }
}

Lionel Chris Felix Sosa

student•

lo hice todo en C# cambia el color dependiendo del turno rojo y azul

Nicolás Pérez

student•

XML

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Button BackgroundColor="Gray" Clicked="OnClick" />
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Column="1" />
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Column="2" />
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Row="1" />
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Column="1" Grid.Row="1" />
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Column="2" Grid.Row="1" />
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Row="2"/>
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Column="1" Grid.Row="2" />
        <Button BackgroundColor="Gray" Clicked="OnClick" Grid.Column="2" Grid.Row="2" />
    </Grid>

</ContentPage>

 public int turn = 0;
        private void OnClick(object sender, EventArgs e)
        {
            var BtSelect = sender as Button;
            if (BtSelect.BackgroundColor == Color.Gray)
            {
                if (turn == 0)
                {
                    BtSelect.BackgroundColor = Color.Red;
                    turn = 1;
                }
                else
                {
                    BtSelect.BackgroundColor = Color.Blue;
                    turn = 0;
                }
            }
        }

kevin leonardo sinza salcedo

student•

Omar Toribio Morales Flores

student•

Alguien logro hacer pequeño el BoxView??? me sale al tamaño de mi columna del grid, eso no es lo que pide el profe

Camilo Vargas

student•

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Contenedores"
             x:Class="Contenedores.MainPage">

    <Grid x:Name="grilla" BackgroundColor="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>


        <Button BorderColor="Black" Clicked="click"/>
        <Button BorderColor="Black" Clicked="click" Grid.Column="1"/>
        <Button BorderColor="Black" Clicked="click" Grid.Column="2"/>
        <Button BorderColor="Black" Clicked="click" Grid.Row="1"/>
        <Button BorderColor="Black" Clicked="click" Grid.Row="1" Grid.Column="1" />
        <Button BorderColor="Black" Clicked="click" Grid.Row="1" Grid.Column="2"/>
        <Button BorderColor="Black" Clicked="click" Grid.Row="2"/>
        <Button BorderColor="Black" Clicked="click" Grid.Row="2" Grid.Column="1" />
        <Button BorderColor="Black" Clicked="click" Grid.Row="2" Grid.Column="2" />

    </Grid>

</ContentPage>


namespace Contenedores
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void click(object sender, EventArgs e)
        {
            Button btn = (Button)sender;
            if (btn.Text == "O")
            {
                btn.FontSize = 30;
                btn.Text = "X";
            }
            else
            {
                btn.FontSize = 30;
                btn.Text = "O";
            }
            
           
        }
    }
}

Santiago Dolores

student•

(

Como asignar un Style en tiempo de ejecución?
*Esto para darle vida al boton reset asginandole un Style ya definido.

RODRIGO DIAZ CONCHA

teacher•

En código sería algo así como:

objeto.Style = Resources["TuEstilo"]

…donde “TuEstilo” es el identificador único (x:Key) del Style dentro del Diccionario de Recursos.

Albert Jiménez

student•

Use estilos y si hubiera podido ver los videos de C# basicos de Platzi talves lo hubiese hecho mucho mejor. Aprender es genial.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Triqui"
             x:Class="Triqui.MainPage">
    <Grid ColumnSpacing="0" RowSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackLayout Orientation="Horizontal" Grid.ColumnSpan="3" HeightRequest="100">
            <!-- Place new controls here -->
            <Label Text="TrIQUI" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand"
               />
            <Button Clicked="Button_Clicked" TextColor="Red" Text="Reset"/>
        </StackLayout>
<!-- Fila 2-->
        <Button Grid.Column="0" Grid.Row="1" x:Name="Btn1" Clicked="Btn1_Clicked"/>
        <Button Grid.Column="1" Grid.Row="1" x:Name="Btn2" Clicked="Btn2_Clicked"/>
        <Button Grid.Column="2" Grid.Row="1" x:Name="Btn3" Clicked="Btn3_Clicked" />
        <!-- Fila 3-->
        <Button Grid.Column="0" Grid.Row="2" x:Name="Btn4" Clicked="Btn4_Clicked"/>
        <Button Grid.Column="1" Grid.Row="2" x:Name="Btn5" Clicked="Btn5_Clicked" />
        <Button Grid.Column="2" Grid.Row="2" x:Name="Btn6" Clicked="Btn6_Clicked"/>
        <!-- Fila 4-->
        <Button Grid.Column="0" Grid.Row="3" x:Name="Btn7" Clicked="Btn7_Clicked"/>
        <Button Grid.Column="1" Grid.Row="3" x:Name="Btn8" Clicked="Btn8_Clicked"/>
        <Button Grid.Column="2" Grid.Row="3" x:Name="Btn9" Clicked="Btn9_Clicked"/>
        
        
        
        
        
    </Grid>
    
    
    

</ContentPage>```

Albert Jiménez

student•

Siento lo de Grid.Column=“0” pero mi visual estudio no me muestra la previsualizacion si no lo utilizo 😃

Jesus Daniel Mendoza Sanchez

student•

Que tal algo como esto?

<StackLayout Padding="20" BackgroundColor="Gray">
        <Grid BackgroundColor="Black" VerticalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" />

            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Column="1" />
            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Column="2" />
            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Row="1" />
            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Row="1" Grid.Column="1" />
            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Row="1" Grid.Column="2" />
            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Row="2" />
            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Row="2" Grid.Column="1" />
            <Button FontSize="50" TextColor="White" Clicked="OnClick" BackgroundColor="White" Grid.Row="2" Grid.Column="2" />

        </Grid>
    </StackLayout>



public partial class MainPage : ContentPage
    {

        string tagValue = "X";

        public MainPage()
        {
            InitializeComponent();
        }

        private void Grid_Focused(object sender, FocusEventArgs e)
        {
            var cell = sender;

        }

        private void OnClick(object sender, EventArgs e)
        {
            var btn = sender as Button;
            setButtonConfig(ref btn);
        }



        private void setButtonConfig(ref Button btn)
        {
            if (string.IsNullOrEmpty(btn.Text))
            {
                string textValue = tagValue;
                Color colorValue;

                if (tagValue == "X")
                {
                    tagValue = "O";
                    colorValue = Color.Red;
                }
                else
                {
                    tagValue = "X";
                    colorValue = Color.Black;
                }

                btn.BackgroundColor = colorValue;
                btn.Text = textValue;
            }

        }
    }

Cristian Faraht Alvear Macias

student•

Esto realice en mi xaml

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>

    <BoxView BackgroundColor="White" />

    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1"
            WidthRequest="100" HeightRequest="100"/>
    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="0" Grid.Row="1"/>
    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="0" Grid.Row="2"/>
    
    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="1" Grid.Row="0"/>
    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="1" Grid.Row="1"/>
    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="1" Grid.Row="2"/>

    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="2" Grid.Row="0"/>
    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="2" Grid.Row="1"/>
    <Button BorderColor="Black" BorderWidth="1" 
            BackgroundColor="White" Clicked="ClickB1" Grid.Column="2" Grid.Row="2"/>

    <BoxView WidthRequest="20" HeightRequest="20" 
             BackgroundColor="Red" VerticalOptions="Center" IsVisible="False"
             x:Name="Box00"/>
    <BoxView WidthRequest="20" HeightRequest="20" Grid.Column="0" Grid.Row="1"
             BackgroundColor="Black" VerticalOptions="Center" IsVisible="False"
             x:Name="Box01"/>
    <BoxView WidthRequest="20" HeightRequest="20" Grid.Column="0" Grid.Row="2"
             BackgroundColor="Yellow" VerticalOptions="Center" IsVisible="False"
             x:Name="Box02"/>
</Grid>

y esto en el .cs

pero no puedo hacer un cuadrado en el centro

    private void ClickB1(object sender, EventArgs e)
    {
        var button = sender as Button;
        var column = (int)button.GetValue(Grid.ColumnProperty);
        var row = (int)button.GetValue(Grid.RowProperty);
        switch(column)
        {
            case 0:
                if (row == 0) Box00.IsVisible = true;
                if (row == 1) Box01.IsVisible = true;
                if (row == 2) Box02.IsVisible = true;
                break;
        }
    }

Daniel Alejandro Molina Yepes

student•

Excelente!!

Lautaro Cabral

student•

Hice el ta te ti y le agregué un boton para limpiar los cuadrantes

El código:

<Grid x:Name="grid" BackgroundColor="Black">
        <Grid.Resources>
        </Grid.Resources>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>

        <Button Clicked="Limpiar" Text="Limpiar" Grid.Column="1" Grid.Row="3"/>
    </Grid>

	bool turnoJ1 = true;
        Button[] cuadrantes;
        List<Button> casillas = new List<Button>();

        public MainPage()
        {
            InitializeComponent();

            int cols = grid.ColumnDefinitions.Count;
            int rows = grid.RowDefinitions.Count;

            cuadrantes = new Button[cols * rows];
            
            for(int i = 0; i < cols; i++)
            {
                for(int k = 0; k < rows - 1; k++)
                {
                    Button labelModel = new Button();
                    labelModel.FontSize = 40;
                    labelModel.BackgroundColor = Color.FromHex("#fafafa");
                    labelModel.Clicked += GridTouch;

                    Grid.SetColumn(labelModel, i);
                    Grid.SetRow(labelModel, k);
                    grid.Children.Add(labelModel);
                    casillas.Add(labelModel);
                }
            }
        }
        
        public void GridTouch(object sender, EventArgs args)
        {
            Button currentBtn = sender as Button;
            currentBtn.Clicked -= GridTouch;
            currentBtn.Text = ToggleTouch();
        }

        public string ToggleTouch()
        {
            this.turnoJ1 = !this.turnoJ1;
            if (this.turnoJ1)
            {
                return "O";
            }
            return "X";
        }

        public void Limpiar(object sender, EventArgs args)
        {
            int cols = grid.ColumnDefinitions.Count;
            int rows = grid.RowDefinitions.Count;

            for (int i = 0; i < casillas.Count(); i++)
            {
                casillas[i].Text = "";
                casillas[i].Clicked += GridTouch;
            }
        }

Ricardo Sanchez Martinez

student•

Así me quedo

    <Grid  BackgroundColor="Black" Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition ></ColumnDefinition>
            <ColumnDefinition ></ColumnDefinition>
            <ColumnDefinition ></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>

        <BoxView BackgroundColor="White" x:Name="caja00" HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White"  Grid.Column="1"   x:Name="caja01"   HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White"  Grid.Column="2"   x:Name="caja02"  HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White" Grid.Row="1"  x:Name="caja10"  HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White" Grid.Row="1" Grid.Column="1" x:Name="caja11"   HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White"  Grid.Row="1" Grid.Column="2"  x:Name="caja12"  HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White"  Grid.Row="2" x:Name="caja20"  HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White" Grid.Row="2" Grid.Column="1"  x:Name="caja21"   HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
        <BoxView BackgroundColor="White" Grid.Row="2" Grid.Column="2"  x:Name="caja22"  HeightRequest="50" WidthRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </BoxView.GestureRecognizers>
        </BoxView>
    </Grid>

 private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            var boxview = sender as BoxView;

          if ((Color)boxview.GetValue(BoxView.BackgroundColorProperty)  == Color.White)
            {
                boxview.SetValue(BoxView.BackgroundColorProperty, Color.Red);
            }
            else
            {
                boxview.SetValue(BoxView.BackgroundColorProperty, Color.White);
            }


        }```

Santiago Dolores

student•

![](

Santiago Dolores

student•

Donde puedo obtener estos snippet de codigo de cada video?