You can build a lot of imaginable UIs with xaml in xamarin forms with Grid and Stacklayout.
The code below shows you how to
<Label Text="Ogunmuyiwa Oluwashayo" TextColor="#000" FontSize="{StaticResource LargeSize}" FontFamily="BoldFont" HorizontalTextAlignment="Center" />
<Label Text="Ogunmuyiwaoluwashayo@gmail.com" FontSize="{StaticResource NormalSize}" FontFamily="LightFont" HorizontalTextAlignment="Center"/>
<Frame BackgroundColor="#F2F4FB" CornerRadius="20">
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*">
<Label Text="Completed" HorizontalOptions="Center" FontSize="14" FontFamily="MediumFont" />
<Label Text="23" TextColor="Black" Grid.Row="1" HorizontalOptions="Center" FontFamily="BoldFont" FontSize="{StaticResource LargerSize}" />
<Label Text="Ongoing" Grid.Column="1" HorizontalOptions="Center" FontSize="14" FontFamily="MediumFont" />
<Label Text="23" TextColor="Black" Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" FontFamily="BoldFont" FontSize="{StaticResource LargerSize}" />
<Label Text="Certificate" Grid.Column="2" HorizontalOptions="Center" FontSize="14" FontFamily="MediumFont" />
<Label Text="23" TextColor="Black" Grid.Column="2" Grid.Row="1" HorizontalOptions="Center" FontFamily="BoldFont" FontSize="{StaticResource LargerSize}" />
</Grid>
</Frame>
<Label Text="Ongoing Courses" TextColor="#000" FontSize="{StaticResource BigSize}" FontFamily="BoldFont" />
<StackLayout Orientation="Horizontal">
<Frame CornerRadius="20" HeightRequest="150" WidthRequest="150" Padding="5" BackgroundColor="{DynamicResource PrimaryColor}">
<Grid>
<Image Source="tk.png" Opacity="0.2" Aspect="Fill" />
<Label Text="Creative Thinking" TextColor="White" FontSize="16" FontFamily="BoldFont" VerticalOptions="Center" HorizontalOptions="Center"/>
</Grid>
</Frame>
<Frame CornerRadius="20" HeightRequest="150" WidthRequest="150" Padding="5" BackgroundColor="#0C5A5C">
<Image Source="tk.png" Opacity="0.2" Aspect="Fill" />
</Frame>
</StackLayout>
<Label Text="Account Settings" TextColor="#000" Margin="0,20" FontSize="{StaticResource BigSize}" FontFamily="BoldFont" />
<Label Text="Log out" TextColor="#000" FontSize="{StaticResource BigSize}" FontFamily="BoldFont" />
</StackLayout>
</Grid>
</ScrollView>
Note:
Fontsize and colors are defined in the App.xaml file
you can clone the code here: https://github.com/KingCodeCamp/XamarinUI.git
Top comments (0)