Me gustarÃa aportar esta extensión de Visual Studio, que en lo personal me ha ayudado mucho, es para formatear el XAML:
Introducción a .NET MAUI
¿Qué aprenderemos en este curso?
Qué es .NET MAUI y Arquitectura de una aplicación
Breve historia de Xamarin
Single project
Instalando Visual Studio 2022
Instalación de Visual Studio 2022 en Windows
Instalación de Visual Studio 2022 en Mac
Conociendo el XAML y su estructura
¿Qué es XAML?
Pages, Layouts y Views
Pages
ContentPage
FlyoutPage y NavigationPage
TabbedPage
Layouts
StackLayout
AbsoluteLayout
Grid
Retos usando el Grid
FlexLayout
Retos usando FlexLayout
Estilos
Tipos de estilos
Practicando estilos en .NET MAUI
Retos usando estilos
Reto de UI con .NET MAUI
¿Qué implica el reto de replicar el UI?
UI de una tarjeta de perfil
Conclusión
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en tÃtulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
16 DÃas
10 Hrs
2 Min
12 Seg
Retos usando el Grid
15/23Recursos
Aportes 18
Preguntas 0
Ordenar por:
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.
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/
![]()
![]()
Mi solución del Challenge extra
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?.
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>
![]()
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?