DEV Community

Cover image for A beautiful profile page UI with xaml in xamarin forms
Adeoye Temitayo
Adeoye Temitayo

Posted on

A beautiful profile page UI with xaml in xamarin forms

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>
Enter fullscreen mode Exit fullscreen mode

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)