A beautiful profile page UI with xaml in xamarin forms 
Tags: xamarinforms, xaml
Published: 2021-06-23 14:30:29

You can build a lot of imaginable UIs with xaml in xamarin forms with Grid and Stacklayout.

The code below shows you how to

<ScrollView>
            <Grid Margin="20,30,20,20" RowDefinitions="Auto,Auto,*">
                <StackLayout Spacing="15">
                    <Grid WidthRequest="160" HorizontalOptions="Center">
                        <Frame IsClippedToBounds="True" HeightRequest="160" VerticalOptions="Center" WidthRequest="160" Padding="0" CornerRadius="80" HorizontalOptions="Center">
                            <Image Source="tk.png" Aspect="Fill" />
                        </Frame>
                        <Frame IsClippedToBounds="True" BackgroundColor="#F2F4FB" WidthRequest="40" HeightRequest="40" CornerRadius="20" Padding="0" HorizontalOptions="Center" VerticalOptions="End" Margin="0,0,-120,20">
                            <Label Text="&#x000f0edc;" FontFamily="material" TextColor="Black" FontSize="28" VerticalOptions="Center" HorizontalOptions="Center" />
                        </Frame>
                    </Grid>

                    <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