Today, I am designing UI of Accordion Please, support my blog by clicking on our sponsors ad! As you see in video there are three types of designs: Simple Accordion https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-designs-part-1.html Simple Accordion Listview:  https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-simple-accordion.html Frame Accordion Listview: https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-frame-accordion.html For Font awesome, please watch video: https://www.youtube.com/watch?v=0l0LYFdLEGs&t=220s First we will create template: FrameView FrameView.xaml <Frame x:Name="frame" HasShadow="True" > <StackLayout x:Name="sl" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid.ColumnDefinition

Today I am designing three different dashboard designs: Simple Dashboard Colorful Dashboard Dashboard with image Create custom control FrameView GridImage FramView.Xaml <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinLesson1.Controls.FrameView"> <ContentView.Content> <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <Image x:Name="imgBG" Source="login_bg.jpg" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill"></Image> <Frame x:Name="frame" HasShadow="True"> <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"> <Label x:Name="lblName

 Dashboard A beautiful dashboard with animation. Below is the image. Please, support my blog by clicking on our sponsors ad! You can see output in https://www.youtube.com/watch?v=0l0LYFdLEGs&t=54s. In this video there are four animation page. I am writing for only one, rest will be continue in another blog. Below is the code: FrameView: FrameView.Xaml <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="5"> <Frame x:Name="frame" HasShadow="True" BorderColor="{DynamicResource Secondary}" Padding="0" CornerRadius="10"> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition>