Profile UI Designs - 1

User Profile page is a way to know each other and it is most important page for social app.
It show the personality of that person. when any one looking for someone on social app, first will review profile page.
Below page will be use for tracking an object.

Let see the xaml code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyProfileUIDesigns.Views.Design1"
             xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:control="clr-namespace:MyProfileUIDesigns.Controls"
             Shell.NavBarIsVisible="False"
             NavigationPage.HasNavigationBar="False">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="350"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            
            <Path Grid.Row="0"  Data="m316.41499,183.085l306.00001,0l0,152.71196c-153,0 -153,58.18606 -306.00001,25.1258l0,-177.83777z"
                  Stroke="#072E5C" Fill="#072E5C" Aspect="Fill" Background="https://liferightaction.org/wp-content/uploads/2019/05/life-right-action-network-background.png"></Path>
           
                
            <Grid Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,50,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <pancake:PancakeView Grid.Row="0" Grid.Column="0" CornerRadius="50" BackgroundColor="White"   HeightRequest="80" WidthRequest="80" Padding="5" 
                           HorizontalOptions="Start" 
                           VerticalOptions="StartAndExpand">
                    <pancake:PancakeView.Shadow>
                        <pancake:DropShadow Color="Black" BlurRadius="15" Offset="0,0"/>
                    </pancake:PancakeView.Shadow>
                    <Image Source="https://www.newsshare.in/wp-content/uploads/2/Cartoon-WhatsApp-DP-19.jpg" Aspect="AspectFit" Margin="-10"/>
                </pancake:PancakeView>

                <Label Text="Adam Willian Thomas" Grid.Row="0" Grid.Column="1" Margin="10,20,0,0" VerticalOptions="StartAndExpand" TextColor="White" FontSize="20"  ></Label>
                <Label Text="Sr. Software Developer" Grid.Row="0" Grid.Column="1" Margin="10,50,0,0" TextColor="White" FontSize="12"  ></Label>
                <Label Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." 
                       Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="10,30,0,0" TextColor="White" FontSize="12"  VerticalTextAlignment="Center"></Label>
            </Grid>
            <ScrollView Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid BackgroundColor="White"  Padding="20" RowSpacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                    <control:TrackView Grid.Row="0" Text="7:00 AM - Waiting for Approval" BGColor="#072E5C"></control:TrackView>
                    <control:TrackView Grid.Row="1" Text="10:30 AM - Approved" BGColor="#072E5C"></control:TrackView>
                    <control:TrackView Grid.Row="2" Text="12:45 PM - Preparing for shipping" BGColor="#072E5C"></control:TrackView>
                    <control:TrackView Grid.Row="3" Text="12:45 PM - Preparing for shipping" BGColor="#072E5C"></control:TrackView>
                    <control:TrackView Grid.Row="4" Text="12:45 PM - Preparing for shipping" BGColor="#072E5C"></control:TrackView>
                    <control:TrackView Grid.Row="5" Text="12:45 PM - Preparing for shipping" BGColor="#072E5C"></control:TrackView>
                    <control:TrackView Grid.Row="6" Text="12:45 PM - Preparing for shipping" BGColor="#072E5C"></control:TrackView>
            </Grid>
            </ScrollView>
        </Grid>
            
    </ContentPage.Content>
</ContentPage> 

TrackView.Xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MyProfileUIDesigns.Controls.TrackView">
    <ContentView.Content>
        <Grid  RowSpacing="0" ColumnSpacing="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="CenterAndExpand" Grid.Row="0" Grid.Column="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <BoxView  WidthRequest="1" Grid.Row="0" Grid.Column="0"  VerticalOptions="FillAndExpand" BackgroundColor="Black"/>
            </Grid>
            <Ellipse x:Name="elps" HeightRequest="5" Aspect="Uniform" Grid.Row="0" Grid.Column="0" WidthRequest="10" Stroke="Pink" StrokeThickness="5"></Ellipse>
            <StackLayout Grid.Row="0" Padding="5,0" Grid.Column="1" HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand">
                <Label x:Name="lbl" TextColor="Black" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand"></Label>
            </StackLayout>
        </Grid>
    </ContentView.Content>
</ContentView>  

TrackView.cs

    public partial class TrackView : ContentView
    {
        public TrackView()
        {
            InitializeComponent();
        }

        public Brush BGColor
        {
            get
            {
                return elps.Stroke;
            }
            set
            {
                elps.Stroke = value;
                elps.Fill = value;
            }
        }

        public string Text
        {
            get
            {
                return lbl.Text;
            }
            set
            {
                lbl.Text = value;
            }
        }
    }  

Conclusion: Today we have profile image for tracking object.

I will bring new profile image which will for social app in next blog.

If you have any question, you can ask me in comment section

Please watch video for better understanding.