Mi solución para el challenge
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,
Iniciar sesión
Retos usando estilos
20/23Recursos
Aportes 5
Preguntas 0
Ordenar por:
Resultado del reto con estilos
Las imágenes utilizadas fueron descargadas de https://iconfinder.com
El código utilizado: los estilos están definidos en el mismo archivo con la intención de utilizarlo solo en este ejemplo. https://gist.github.com/bidkar/2070f12f8445671be36d70882fa17355
Reto Culminado 😄
Recursos Adicionales:
Code
Nota: El código puede mejorarse! 😄
<!--#region Styles-->
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="IconsPosition" TargetType="Image">
<Setter Property="VerticalOptions" Value="Start"/>
<Setter Property="HorizontalOptions" Value="End"/>
</Style
<Style x:Key="IntryourExtractFontStyle" TargetType="Label">
<Setter Property="FontFamily" Value="RobotoMedium"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="TextColor" Value="#7b8389"/>
</Style
<Style x:Key="ButtonsBookFollStyle" TargetType="Button">
<Setter Property="Padding" Value="14"/>
<Setter Property="FontFamily" Value="RobotoMedium"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Grid.Row" Value="0"/>
</Style
<Style x:Key="TitleStuConFolFontStyle" TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="FontFamily" Value="RobotoMedium"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="TextColor" Value="#7b8389"/>
</Style
<Style x:Key="ContentStuConFolFontStyle" TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="FontFamily" Value="RobotoBold"/>
<Setter Property="FontSize" Value="22"/>
<Setter Property="TextColor" Value="#272932"/>
</Style
<Style x:Key="VerticalLineStCoFoStyle" TargetType="Label">
<Setter Property="FontFamily" Value="RobotoThin"/>
<Setter Property="FontSize" Value="30"/>
<Setter Property="TextColor" Value="#e4e5e8"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Start"/>
</Style
<Style x:Key="NotPressButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="RobotoBold"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="#7b8389"/>
<Setter Property="Padding" Value="0,10"/>
<Setter Property="CornerRadius" Value="10"/>
</Style
<Style x:Key="FlexLayoutCard" TargetType="FlexLayout">
<Setter Property="Direction" Value="Row"/>
<Setter Property="AlignItems" Value="End"/>
<Setter Property="JustifyContent" Value="Start"/>
</Style
<Style x:Key="PrincipalTextColorCard" TargetType="Label">
<Setter Property="TextColor" Value="#272932"/>
<Setter Property="FontFamily" Value="RobotoBold"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<!--#endregion
<ScrollView BackgroundColor="#EEEBE3">
<Frame CornerRadius="20"
BackgroundColor="#FBFBFB"
BorderColor="Transparent"
Margin="20"
Padding="20,25,20,40">
<Grid ColumnDefinitions="*,*,*"
RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"
RowSpacing="4"
ColumnSpacing="0">
<!--#region Row0: Image, Icon & Close Icon-->
<AbsoluteLayout Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="2">
<Frame MaximumWidthRequest="120"
IsClippedToBounds="True"
Padding="0"
BorderColor="Transparent"
Margin="0,15">
<Image Source="artist"/>
</Frame>
<Image Source="verified_account_90"
AbsoluteLayout.LayoutBounds="0.56,0,44,44"
AbsoluteLayout.LayoutFlags="PositionProportional"/>
</AbsoluteLayout>
<Image Grid.Column="2"
Grid.Row="0"
Source="close_90"
MaximumWidthRequest="18"
Margin="0,15,0,0"
Style="{StaticResource IconsPosition}"/>
<!--#endregion-->
<!--#region Row1,2,3: Title, Introduce yourself & Extract-->
<Label Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="3"
Text="Andrade J."
FontFamily="RobotoBlack"
FontSize="30"
TextColor="#272932"/>
<FlexLayout Grid.Column="0"
Grid.Row="2"
Grid.ColumnSpan="3"
Direction="Row"
AlignItems="Start"
Wrap="Wrap">
<Label Text="Software Engineer at"
Style="{StaticResource IntryourExtractFontStyle}"/>
<Label Text="@jandrades"
FontFamily="RobotoMedium"
FontSize="16"
TextColor="#272932"
Margin="2,0,0,0"/>
</FlexLayout>
<Label Text="A developer that keens simplicity and usability."
Grid.Column="0"
Grid.Row="3"
Grid.ColumnSpan="3"
Style="{StaticResource IntryourExtractFontStyle}"/>
<!--#endregion-->
<!--#region Row4: Buttons Book & Follow-->
<Grid Grid.Column="0"
Grid.Row="4"
Grid.ColumnSpan="3"
ColumnDefinitions="*,*,*"
RowDefinitions="Auto"
ColumnSpacing="12"
Margin="0,20,0,20">
<Button Text="Book Class | $1,300.00"
Grid.Column="0"
Grid.ColumnSpan="2"
BackgroundColor="#1e56c3"
TextColor="#ffffff"
Style="{StaticResource ButtonsBookFollStyle}"/>
<Button Text="Follow"
Grid.Column="2"
BackgroundColor="#e7e8e9"
TextColor="#272932"
Style="{StaticResource ButtonsBookFollStyle}"/>
</Grid>
<!--#endregion-->
<!--#region Row5: Students, Content & Followers-->
<Grid Grid.Column="0"
Grid.Row="5"
Grid.ColumnSpan="3"
ColumnDefinitions="*,Auto,*,Auto,*"
RowDefinitions="Auto">
<VerticalStackLayout HorizontalOptions="Fill"
VerticalOptions="Fill"
Grid.Column="0"
Grid.Row="0">
<Label Text="Students"
Style="{StaticResource TitleStuConFolFontStyle}"/>
<Label Text="35,789"
Style="{StaticResource ContentStuConFolFontStyle}"/>
</VerticalStackLayout>
<Label Text="|"
Grid.Column="1"
Grid.Row="0"
Style="{StaticResource VerticalLineStCoFoStyle}"/>
<VerticalStackLayout HorizontalOptions="Fill"
VerticalOptions="Fill"
Grid.Column="2"
Grid.Row="0">
<Label Text="Content"
Style="{StaticResource TitleStuConFolFontStyle}"/>
<Label Text="3,648"
Style="{StaticResource ContentStuConFolFontStyle}"/>
</VerticalStackLayout>
<Label Text="|"
Grid.Column="3"
Grid.Row="0"
Style="{StaticResource VerticalLineStCoFoStyle}"/>
<VerticalStackLayout HorizontalOptions="Fill"
VerticalOptions="Fill"
Grid.Column="4"
Grid.Row="0">
<Label Text="Followers"
Style="{StaticResource TitleStuConFolFontStyle}"/>
<Label Text="3,6m"
Style="{StaticResource ContentStuConFolFontStyle}"/>
</VerticalStackLayout>
</Grid>
<!--#endregion-->
<!--#region Row6: Buttons Courses, Source files & Discussion-->
<Frame Grid.Column="0"
Grid.Row="6"
Grid.ColumnSpan="3"
Padding="0"
CornerRadius="10"
BackgroundColor="#f7f7f7"
BorderColor="Transparent"
Margin="0,30,0,20">
<Grid ColumnDefinitions="*,*,*"
RowDefinitions="Auto">
<Button Text="Courses"
Grid.Column="0"
Grid.Row="0"
BackgroundColor="#ffffff"
FontFamily="RobotoBold"
FontSize="12"
TextColor="#272932"
Padding="0,10"
CornerRadius="10"
Margin="6,6,0,6">
<Button.Shadow>
<Shadow Brush="#272932"
Offset="6,6"
Radius="14"
Opacity="0.06"/>
</Button.Shadow>
</Button>
<Button Text="Source files"
Grid.Column="1"
Grid.Row="0"
Margin="0,6,0,6"
Style="{StaticResource NotPressButtonStyle}"/>
<Button Text="Discussion"
Grid.Column="2"
Grid.Row="0"
Margin="0,6,6,6"
Style="{StaticResource NotPressButtonStyle}"/>
</Grid>
</Frame>
<!--#endregion-->
<!--#region Row7: Card-->
<Frame Grid.Column="0"
Grid.Row="7"
Grid.ColumnSpan="3"
BackgroundColor="#ecdcf4"
Padding="26"
CornerRadius="30"
BorderColor="Transparent">
<Grid ColumnDefinitions="*,30"
RowDefinitions="Auto,Auto,Auto,Auto,Auto"
ColumnSpacing="12">
<Label Text="Become a UX Designer"
Grid.Column="0"
Grid.Row="0"
FontSize="18"
Style="{StaticResource PrincipalTextColorCard}"/>
<Image Source="favorite_90"
MaximumWidthRequest="22"
Grid.Column="1"
Grid.Row="0"
Style="{StaticResource IconsPosition}"/>
<Label Text="Learn the skills & get the Job"
Grid.Column="0"
Grid.Row="1"
FontFamily="RobotoMedium"
FontSize="12"
TextColor="#625f6c"/>
<Label Text="/ / / / /"
Grid.Column="0"
Grid.Row="3"
FontSize="20"
FontAttributes="Italic"
Margin="0,20,0,30"
Style="{StaticResource PrincipalTextColorCard}"/>
<FlexLayout Grid.Column="0"
Grid.Row="4"
Wrap="Wrap"
Style="{StaticResource FlexLayoutCard}">
<Label Text="4.85"
FontSize="40"
Margin="0,0,0,-4"
Style="{StaticResource PrincipalTextColorCard}"/>
<Image Source="hand_drawn_star_90"
MaximumWidthRequest="10"
Margin="2,0,2,2"
Style="{StaticResource IconsPosition}"/>
<Label Text="ratings"
FontSize="16"
Style="{StaticResource PrincipalTextColorCard}"/>
</FlexLayout>
<FlexLayout Grid.Column="1"
Grid.Row="4"
Margin="0,0,0,4"
Wrap="NoWrap"
Style="{StaticResource FlexLayoutCard}">
<Label Text="48"
Grid.Column="1"
Grid.Row="4"
FontSize="16"
Style="{StaticResource PrincipalTextColorCard}"/>
<Label Text="h"
Grid.Column="1"
Grid.Row="4"
FontSize="12"
Margin="0,0,0,0.6"
Style="{StaticResource PrincipalTextColorCard}"/>
</FlexLayout>
</Grid>
</Frame>
<!--#endregion-->
</Grid>
</Frame>
</ScrollView>
Reto terminado 😃
Resultado teniendo en cuenta la imagen de dribbble
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.