No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Retos usando el Grid

15/23
Recursos

Aportes 16

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

Me gustaría aportar esta extensión de Visual Studio, que en lo personal me ha ayudado mucho, es para formatear el XAML:

XAMLStyler

Resultado del Challenge Extra

Utilicé BoxViews para los elementos del Grid, con colores parecidos a los de la imagen de ejemplo, y por medio de Grid.Row, Grid.Column, Grid.ColumnSpan y Grid.RowSpan conseguí el resultado mostrado.

![](https://static.platzi.com/media/user_upload/image-39df2faa-6ed3-4f38-97cd-84ad7050a6ef.jpg)

I love it ūü•į

En Microsoft Learn se encuentra contenido adicional sobre el manejo de StackLayout y Grid:

https://learn.microsoft.com/en-us/training/modules/customize-xaml-pages-layout/

![](https://static.platzi.com/media/user_upload/image-c5f290b4-11b7-4b86-a106-23c873be507f.jpg)
Mi soluci√≥n del Challenge extra ![](https://static.platzi.com/media/user_upload/image-4583b241-95cb-4d7a-903e-85cc96d43e1d.jpg) En vez de utilizar Frame, utilice Border, Con Border.Background y LinearGradientBrush agrego 2 GradientStop de colores diferentes para agregar un degradado, y me gusta el resultado porque se ve m√°s din√°mico ¬ŅQu√© les parece?.
![](https://static.platzi.com/media/user_upload/image-80315160-8396-4b3b-a838-56126658dd0b.jpg)Este mi resultado del Demo
Estoy motivado!

Mi Resultado:

Al grid le puse un Margin de 5 para separarlo de los bordes, al Grid le defin√≠ 6 rows con tama√Īo proporcional, tambi√©n 3 columnas con tama√Īo proporcional, us√© Labels para los elementos del Grid, para el primer Grid lo coloqu√© en la fila 0 y la columna 0, pero le defin√≠ que ocupe 2 columnas y que ocupe 2 filas, para obtener el cuadro grande.

Challenge ūüėĄ

Code ūüėÉ

    <Grid ColumnDefinitions="*,*,*"
          RowDefinitions="*,*,*,*,*,*"
          ColumnSpacing="6"
          RowSpacing="6"
          Margin="6">
        <Button Grid.Column="0"
                Grid.Row="0"
                Grid.ColumnSpan="2"
                Grid.RowSpan="2"
                BorderColor="Transparent"
                BackgroundColor="#9DDBFE"
                CornerRadius="0"/>
        <Button Grid.Column="2"
                Grid.Row="0"
                BorderColor="Transparent"
                BackgroundColor="#DCDCFD"
                CornerRadius="0"/>
        <Button Grid.Column="2"
                Grid.Row="1"
                BorderColor="Transparent"
                BackgroundColor="#DCDCFD"
                CornerRadius="0"/>
        <Button Grid.Column="0"
                Grid.Row="2"
                Grid.ColumnSpan="2"
                BorderColor="Transparent"
                BackgroundColor="#FAA4ED"
                CornerRadius="0"/>
        <Button Grid.Column="2"
                Grid.Row="2"
                BorderColor="Transparent"
                BackgroundColor="#FAA4ED"
                CornerRadius="0"/>
        <Button Grid.Column="0"
                Grid.Row="3"
                BorderColor="Transparent"
                BackgroundColor="#DCDCFD"
                CornerRadius="0"/>
        <Button Grid.Column="1"
                Grid.Row="3"
                Grid.ColumnSpan="2"
                BorderColor="Transparent"
                BackgroundColor="#DCDCFD"
                CornerRadius="0"/>
        <Button Grid.Column="0"
                Grid.Row="4"
                BorderColor="Transparent"
                BackgroundColor="#9DDBFE"
                CornerRadius="0"/>
        <Button Grid.Column="1"
                Grid.Row="4"
                BorderColor="Transparent"
                BackgroundColor="#9DDBFE"
                CornerRadius="0"/>
        <Button Grid.Column="2"
                Grid.Row="4"
                BorderColor="Transparent"
                BackgroundColor="#9DDBFE"
                CornerRadius="0"/>
        <Button Grid.Column="0"
                Grid.Row="5"
                Grid.ColumnSpan="3"
                BorderColor="Transparent"
                BackgroundColor="#FAA4ED"
                CornerRadius="0"/>
    </Grid>

Buenas noches, para el ejercicio dividi el grid en 3 columnas con 6 filas, aplique el Margin, ColumnSpacing y RowSpacing al grid para separar el contenido y el Grid.ColumnSpan y Grid.RowSpan para los botones que se deben agrandar en centido horizontal o vertical.

Este es mi codigo:

<VerticalStackLayout>
        <Grid RowDefinitions="*,*,*,*,*,*" ColumnDefinitions="*,*,*"
              VerticalOptions="CenterAndExpand"
              ColumnSpacing="5"
              RowSpacing="5"
              Margin="5">
            <Button
                Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Grid.RowSpan="2"
                BackgroundColor="LightBlue"
                HeightRequest="300"
                BorderColor="Black"/>
            <Button
                Grid.Row="0"
                Grid.Column="2"
                BackgroundColor="LightGrey"
                BorderColor="Black"/>
            <Button
                Grid.Row="1"
                Grid.Column="2"
                BackgroundColor="LightGray"
                BorderColor="Black"/>
            <Button
                Grid.Row="2"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                BackgroundColor="LightPink"
                HeightRequest="100"
                BorderColor="Black"/>
            <Button
                Grid.Row="2"
                Grid.Column="2"
                Grid.ColumnSpan="2"
                BackgroundColor="LightPink"
                BorderColor="Black"/>
            <Button
                Grid.Row="3"
                Grid.Column="0"
                BackgroundColor="LightGray"
                BorderColor="Black"
                HeightRequest="100"/>
            <Button
                Grid.Row="3"
                Grid.Column="1"
                BackgroundColor="LightGray"
                Grid.ColumnSpan="2"
                BorderColor="Black"/>

            <Button
                Grid.Row="4"
                Grid.Column="0"
                BackgroundColor="LightBlue"
                BorderColor="Black"
                HeightRequest="100"/>
            <Button
                Grid.Row="4"
                Grid.Column="1"
                BackgroundColor="LightBlue"
                BorderColor="Black"/>
            <Button
                Grid.Row="4"
                Grid.Column="2"
                BackgroundColor="LightBlue"
                BorderColor="Black"/>

            <Button
                Grid.Row="5"
                Grid.Column="0"
                Grid.ColumnSpan="3"
                BackgroundColor="LightPink"
                BorderColor="Black"
                HeightRequest="100"/>
        </Grid>
    </VerticalStackLayout>
![](https://static.platzi.com/media/user_upload/image-049a9962-7970-4dcc-b89a-6468f4368563.jpg)
![]()![](https://drive.google.com/file/d/1eFfEMWZrT05IJvfazIddYJ9og2ywqYJf/view?usp=sharing)![](https://static.platzi.com/media/user_upload/challengeGrid-6ff50fb4-f623-434e-8ebc-ac92fcce2134.jpg)
Toda mi carrera con .NET ha sido en el desarrollo de paginas. Me esta gustando mucho este curso descubriendo mas del desarrollo multiplataforma con MAUI. Por aquí dejo los resultados del reto.![](https://static.platzi.com/media/user_upload/Captura-3dc4a468-2b7e-4d49-b438-bba7a07abe55.jpg)