Online course UI Deisgn 2 using xamarin form

 In previous blog we have seen below UI Design for online course

Online Course UI Design xamarin form
Online Course UI Design xamarin form

I have create two more UI Designs for Online courses.
I have also explain the code, Please watch it here.
Below is UI Design:

Online Course UI Design using xamarin form
Online Course UI Design using xamarin form

First three Page in above image is actually one page shown tabs design in each page.
First we will create all classes then template then we will create pages.
Classes are below.

CourseViewModel.cs

    public class CourseViewModel
    {
        public string Name { get; set; }
        public string Rating { get; set; }
        public string LecturerName { get; set; }
        public string Price { get; set; }
        public string Icon { get; set; }
        public string Tag { get; set; }
        public Color IconColor { get; set; }
        public ImageSource ProfilePic  { get; set; }
    }

CourseModel.cs

    public class CourseModel
    {
        public List<CourseViewModel> GetList()
        {
            List<CourseViewModel> list = new List<CourseViewModel>();
            list.Add(new CourseViewModel
            {
                Name = "Internet of Things",
                Rating = "* 4.0",
                LecturerName = "Rahul Agarwal",
                Icon = Utility.Solid.Check_Circle,
                IconColor = Color.FromHex("#009E60"),
                Price = "$200",
                Tag = "Best Seller",
                ProfilePic = "https://imageio.forbes.com/specials-images/imageserve/5ecb441e798e4c00060d1d66/3-Ways-Every-Company-Should-Prepare-For-The-Internet-Of-Things/960x0.jpg",
            });

            list.Add(new CourseViewModel
            {
                Name = "Programming with Python",
                Rating = "* 4.5",
                LecturerName = "Dr. Mehdi Akhgari",
                Icon = Utility.Solid.Play_Circle,
                IconColor = Color.FromHex("#115B63"),
                Price = "$200",
                Tag = "Best Seller",
                ProfilePic = "https://d1jnx9ba8s6j9r.cloudfront.net/blog/wp-content/uploads/2014/11/Programming-With-Python-Tutorials-01.png",
            });
            
            list.Add(new CourseViewModel
            {
                Name = "Data Science and Machine Learning",
                Rating = "* 3.5",
                LecturerName = "Romelyn Abando",
                Icon = Utility.Solid.Play_Circle,
                IconColor = Color.FromHex("#115B63"),
                Price = "$200",
                Tag = "Best Seller",
                // ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWR7fU-Ju22niixgRowQPqmhmMbv-4aKkcJQ",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_wqBB3_xBcWRSHcLhtWRWUoq4Edz3DR785w",
                //ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc4CzBBprJcTmQFs7jQNDWRW1NtcRq5e3VnQ",
            });

            list.Add(new CourseViewModel
            {
                Name = "Digital Marketing",
                Rating = "* 3.0",
                LecturerName = "Brian Amouzegar",
                Icon = Utility.Solid.Play_Circle,
                IconColor = Color.FromHex("#115B63"),
                Price = "$200",
                Tag = "Best Seller",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8UEzlrBNpDRQcApgdB0hYlkYeF-fhqQPJow",
            });
            list.Add(new CourseViewModel
            {
                Name = "Management Course",
                Rating = "* 3.5",
                LecturerName = "Frankie Anderson",
                Icon = Utility.Solid.Play_Circle,
                IconColor = Color.FromHex("#115B63"),
                Price = "$200",
                Tag = "Best Seller",
                ProfilePic = "https://campus-live.s3.us-east-2.amazonaws.com/course-category/management-78",
            });
            list.Add(new CourseViewModel
            {
                Name = "Software Development Course",
                Rating = "* 5.0",
                LecturerName = "Rushdi Alsaleh",
                Icon = Utility.Solid.Play_Circle,
                IconColor = Color.FromHex("#115B63"),
                Price = "$200",
                Tag = "Best Seller",
                ProfilePic = "https://www.infognana.com/wp-content/uploads/2018/11/Software-Development-1200x627.png",
            });
            return list;
        }
    }

CategoryViewModel.cs

    public class CategoryViewModel
    {
        public string Name { get; set; }
        public string Icon { get; set; }
        public Color BGColor { get; set; } = Color.White;
        public Color TextColor { get; set; } = Color.FromHex("#115B63");
    }

CategoryModel.cs

    public class CategoryModel
    {
        public List<CategoryViewModel> GetTopic()
        {
            List<CategoryViewModel> list = new List<CategoryViewModel>();
            list.Add(new CategoryViewModel
            {
                Name = "C#",
                Icon = Utility.Solid.Address_Card,
                BGColor = Color.White,
                TextColor = Color.FromHex("#115B63")
            });
            list.Add(new CategoryViewModel
            {
                Name = "PHP",
                Icon = Utility.Solid.Book_Open,
                BGColor = Color.White,
                TextColor = Color.FromHex("#115B63")
            });
            list.Add(new CategoryViewModel
            {
                Name = "Java",
                Icon = Utility.Solid.Box,
                BGColor = Color.White,
                TextColor = Color.FromHex("#115B63")
            });
            list.Add(new CategoryViewModel
            {
                Name = "MVC",
                Icon = Utility.Solid.Building,
                BGColor = Color.White,
                TextColor = Color.FromHex("#115B63")
            });

            return list;
        }
        public List<CategoryViewModel> GetList()
        {
            List<CategoryViewModel> list = new List<CategoryViewModel>();
            list.Add(new CategoryViewModel
            {
                Name = "CCNA",
                Icon = Utility.Solid.Address_Card
            });
            list.Add(new CategoryViewModel
            {
                Name = "Comptia",
                Icon = Utility.Solid.Book_Open
            });
            list.Add(new CategoryViewModel
            {
                Name = "DevOps",
                Icon = Utility.Solid.Box
            });
            list.Add(new CategoryViewModel
            {
                Name = "Microsoft",
                Icon = Utility.Solid.Building
            });
            list.Add(new CategoryViewModel
            {
                Name = "Security",
                Icon = Utility.Solid.Address_Card
            });
            list.Add(new CategoryViewModel
            {
                Name = "Server",
                Icon = Utility.Solid.Columns
            });

            return list;
        }
    }

LecturerViewModel.cs

    public class LecturerViewModel
    {
        public string Name { get; set; }
        public ImageSource ProfilePic { get; set; }
        public string Rating { get; set; }
        public string Topics { get; set; }
        public string NoOfLesson { get; set; }
        public string Performance { get; set; }
        public double Progress { get; set; }
        public string Rate { get; set; }
    }

LecturerModel.cs

    public class LecturerModel
    {
        public List<LecturerViewModel> Get()
        {
            List<LecturerViewModel> list = new List<LecturerViewModel>();
            list.Add(new LecturerViewModel
            {
                Name = "Anushka Dwayne Johnson",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWR7fU-Ju22niixgRowQPqmhmMbv-4aKkcJQ",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "8/10",
                Topics = "C#,PHP",
                Progress = 0.8,
                Rate = "$100"
            });

            list.Add(new LecturerViewModel
            {
                Name = "Katrina Will Smith",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGzJ5pf0DCv9vt23kzS4bVrD5gdhOxSvS9ew",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "4/10",
                Topics = "C#,PHP",
                Progress = 0.9,
                Rate = "$100"
            });

            list.Add(new LecturerViewModel
            {
                Name = "Rashmika Vin Diesel",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSK_5khGWXgQYUQIZOzibWuSgGInxReaCZBgQ",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "7/10",
                Topics = "C#,PHP",
                Progress = 0.7,
                Rate = "$100"
            });

            

            list.Add(new LecturerViewModel
            {
                Name = "Madhuri Chris Hemsworth.",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr3PWzPZ80p4DyexDIpuQB1qZXhCtJ4Qb2bw",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "9/10",
                Topics = "C#,PHP",
                Progress = 0.9,
                Rate = "$100"
            });

            list.Add(new LecturerViewModel
            {
                Name = "Ankita Robert Downey Jr.",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeK0yborsJrdFJJvpRG7puz0M4RCQ_S0Lclg",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "5/10",
                Topics = "C#,PHP",
                Progress = 0.5,
                Rate = "$100"
            });

            list.Add(new LecturerViewModel
            {
                Name = "Priyanka Leonardo DiCaprio",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeK0yborsJrdFJJvpRG7puz0M4RCQ_S0Lclg",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "10/10",
                Topics = "C#,PHP",
                Progress = 1,
                Rate = "$100"
            });
            return list;
        }

        public List<LecturerViewModel> GetCart()
        {
            List<LecturerViewModel> list = new List<LecturerViewModel>();
            list.Add(new LecturerViewModel
            {
                Name = "Anushka Dwayne Johnson",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWR7fU-Ju22niixgRowQPqmhmMbv-4aKkcJQ",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "8/10",
                Topics = "C#,PHP",
                Progress = 0.8,
                Rate = "$100"
            });

            list.Add(new LecturerViewModel
            {
                Name = "Katrina Will Smith",
                ProfilePic = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGzJ5pf0DCv9vt23kzS4bVrD5gdhOxSvS9ew",
                Rating = "* 3.5",
                NoOfLesson = "28",
                Performance = "4/10",
                Topics = "C#,PHP",
                Progress = 0.9,
                Rate = "$100"
            });

            return list;
        }
    }
Below are template code. 
I have use fontawesome in categoryview template. Copy fontawesome code from here

MyTopicView.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:viewmodels="clr-namespace:OnlineCourseUIDesigns.ViewModels"
             x:Class="OnlineCourseUIDesigns.Controls.MyTopicView">
  <ContentView.Content>
        <StackLayout x:DataType="viewmodels:CourseViewModel" Padding="5,5" Spacing="0" >
            <Frame CornerRadius="20" HasShadow="True"  >
                <Grid  HorizontalOptions="FillAndExpand" RowSpacing="0" VerticalOptions="FillAndExpand" 
                  RowDefinitions="Auto,Auto" ColumnDefinitions="55,*" >
                    <Label Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HorizontalOptions="Start"  VerticalOptions="Center" Text="{Binding Icon}"
                           TextColor="{Binding IconColor}" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30"  ></Label>
                    <Label Grid.Row="0" Grid.Column="1" FontAttributes="Bold" Text="{Binding Name}" Margin="-17,0,0,0" TextColor="#202020" HorizontalOptions="Start"  ></Label>
                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding LecturerName}"  Margin="-17,0,0,0" TextColor="Gray" HorizontalOptions="Start" ></Label>
                </Grid>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

LecturerView.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:model="clr-namespace:OnlineCourseUIDesigns.ViewModels"
             x:Class="OnlineCourseUIDesigns.Controls.LecturerView">
    <ContentView.Content>
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20,10">
            <Frame BackgroundColor="White" CornerRadius="20" HasShadow="True">
                <Grid x:DataType="model:LecturerViewModel" HorizontalOptions="FillAndExpand" 
                      VerticalOptions="FillAndExpand" ColumnSpacing="20"
                      RowDefinitions="Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto">
                    <Frame Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" CornerRadius="20" HeightRequest="40" HasShadow="True">
                        <Image Aspect="AspectFill" Margin="-20" Source="{Binding ProfilePic}"></Image>
                    </Frame>
                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" Grid.ColumnSpan="2" VerticalOptions="Start" TextColor="#115B63" FontAttributes="Bold"></Label>
                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Topics}" Grid.ColumnSpan="2"  TextColor="#202020" FontAttributes="Bold"></Label>
                    <Label Grid.Row="2" Grid.Column="1" Text="{Binding Rating}" Grid.ColumnSpan="2"  TextColor="#202020" FontAttributes="Bold"></Label>
                    <Label Grid.Row="3" Grid.Column="0" Text="No of Lesson" TextColor="#202020" FontAttributes="Bold"></Label>
                    <Label Grid.Row="4" Grid.Column="0" Text="{Binding NoOfLesson}" TextColor="Gray" FontAttributes="Bold"></Label>
                    <Label Grid.Row="3" Grid.Column="1" Text="Performance" TextColor="#202020" FontAttributes="Bold"></Label>
                    <Button Grid.Row="3" Grid.RowSpan="2"   Grid.Column="2" FontAttributes="Bold" CornerRadius="20" 
                            BackgroundColor="#F8F8F8" HeightRequest="40" HorizontalOptions="Center" 
                            VerticalOptions="Center" Text="Add to cart" TextColor="#115B63" ></Button>
                    <Label Grid.Row="4" Grid.Column="1" Text="{Binding Performance}" TextColor="Gray" FontAttributes="Bold"></Label>
                   
                    <ProgressBar Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" Progress="{Binding Progress}" ProgressColor="#115B63"></ProgressBar>
                </Grid>
                
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

CategoryView.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:viewmodels="clr-namespace:OnlineCourseUIDesigns.ViewModels"
             x:Class="OnlineCourseUIDesigns.Controls.CategoryView">
    <ContentView.Content>
        <StackLayout x:DataType="viewmodels:CategoryViewModel" Padding="5,5" Spacing="0" >
            <Frame CornerRadius="20"   
                   HasShadow="True" BackgroundColor="{Binding BGColor}" >
                <Grid  HorizontalOptions="FillAndExpand" ColumnSpacing="0" VerticalOptions="FillAndExpand" Margin="-10" 
                  RowDefinitions="Auto,Auto" >
                    <Label  Grid.Column="0"  HorizontalOptions="Start"  VerticalOptions="Center" Text="{Binding Icon}"
                            TextColor="{Binding TextColor}" FontFamily="{StaticResource FontAwesomeSolid}" 
                             FontSize="20"  ></Label>
                    <Label Grid.Column="1" Text="{Binding Name}" Margin="-17,0,0,0" HorizontalOptions="Start" TextColor="{Binding TextColor}" ></Label>
                </Grid>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

Below code is for My course Page

MyCourse.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="OnlineCourseUIDesigns.Views.MyCourse"
             xmlns:control="clr-namespace:OnlineCourseUIDesigns.Controls"
             BackgroundColor="#FAFAFA"
             Title="My Course">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20"
              RowDefinitions="55,Auto,Auto,*">
            <Frame Grid.Row="0" HasShadow="True" CornerRadius="30" HeightRequest="20" BorderColor="#F8F8F8">
                <Entry Margin="0,-20" HorizontalOptions="FillAndExpand" TextColor="Gray" Placeholder="Search Course" PlaceholderColor="LightGray"></Entry>
            </Frame>
            <Frame Grid.Row="1" BackgroundColor="White" Margin="0,10,0,0" CornerRadius="20" HasShadow="True">
                <Grid  HorizontalOptions="FillAndExpand" 
                      VerticalOptions="FillAndExpand" ColumnSpacing="20"
                      RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,*">
                    
                    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Course in Progress" TextColor="#115B63" FontSize="16" FontAttributes="Bold"></Label>
                    <Frame Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" CornerRadius="20"   
                           VerticalOptions="FillAndExpand" HasShadow="True">
                        <Image Aspect="AspectFill" Margin="-20" Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8UEzlrBNpDRQcApgdB0hYlkYeF-fhqQPJow"
                               HeightRequest="60" WidthRequest="60"></Image>
                    </Frame>
                    <Label Grid.Row="1" Grid.Column="1" Text="Digital Marketing" FontSize="16" VerticalOptions="Start" TextColor="#202020" FontAttributes="Bold"></Label>
                    <Label Grid.Row="2" Grid.Column="1" Text="Lecturer: Rahul Agarwal" TextColor="gray" FontAttributes="Bold"></Label>
                    <Label Grid.Row="3" Grid.Column="0" Text="25 Lesson"  VerticalOptions="Start" TextColor="gray" FontAttributes="Bold"></Label>
                    <Label Grid.Row="3" Grid.Column="1" Text="40 Lessson" HorizontalOptions="End" TextColor="gray" FontAttributes="Bold"></Label>
                    <ProgressBar Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Progress="0.8" ProgressColor="DeepPink"></ProgressBar>
                </Grid>
            </Frame>
            <StackLayout Grid.Row="2" Padding="0,20,0,0" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                <Label x:Name="lblTopic" Text="Topic" FontSize="15" VerticalOptions="Start" HorizontalOptions="StartAndExpand" TextColor="#202020" FontAttributes="Bold">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="lblTopic_Tapped"></TapGestureRecognizer>
                    </Label.GestureRecognizers>
                </Label>
                <Label x:Name="lblCategory" Text="Category" FontSize="15" VerticalOptions="Start" HorizontalOptions="CenterAndExpand" TextColor="Gray" FontAttributes="Bold">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="lblCategory_Tapped"></TapGestureRecognizer>
                    </Label.GestureRecognizers>
                </Label>
                <Label x:Name="lblLecturer" Text="Lecturer" FontSize="15" VerticalOptions="Start" HorizontalOptions="EndAndExpand" TextColor="Gray" FontAttributes="Bold">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="lblLecturer_Tapped"></TapGestureRecognizer>
                    </Label.GestureRecognizers>
                </Label>
            </StackLayout>
            <ListView x:Name="listview" ItemSelected="listview_ItemSelected" SeparatorVisibility="None" Grid.Row="3" HasUnevenRows="True" HorizontalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <control:MyTopicView></control:MyTopicView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <CollectionView Grid.Row="3" Margin="-10,0" SelectionMode="Single" IsVisible="false" HeightRequest="130" x:Name="cvCategory" 
                HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical" Span="3"></GridItemsLayout>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate >
                    <DataTemplate>
                        <control:CategoryView></control:CategoryView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            <ListView x:Name="listviewLec" Margin="-20,0" Grid.Row="3" IsVisible="false" HasUnevenRows="True" SeparatorVisibility="None" ItemSelected="listview_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <control:LecturerView></control:LecturerView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

MyCourse.cs

    public partial class MyCourse : ContentPage
    {
        public MyCourse()
        {
            InitializeComponent();
            listview.ItemsSource = new CourseModel().GetList();
            cvCategory.ItemsSource = new CategoryModel().GetList();
            listviewLec.ItemsSource = new LecturerModel().Get();
        }

        private async void listview_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if(listview.SelectedItem != null)
            {
                listview.SelectedItem = null;
                await Shell.Current.GoToAsync("Topic");
            }
        }

        private void lblTopic_Tapped(object sender, EventArgs e)
        {
            lblLecturer.TextColor = lblCategory.TextColor = Color.Gray;
            lblTopic.TextColor = Color.FromHex("#202020");
            listview.IsVisible = true;
            cvCategory.IsVisible = listviewLec.IsVisible = false;
           
        }
        private void lblCategory_Tapped(object sender, EventArgs e)
        {
            lblLecturer.TextColor = lblTopic.TextColor = Color.Gray;
            lblCategory.TextColor = Color.FromHex("#202020");
            cvCategory.IsVisible = true;
            listview.IsVisible = listviewLec.IsVisible = false;
        }
        private void lblLecturer_Tapped(object sender, EventArgs e)
        {
            lblCategory.TextColor = lblTopic.TextColor = Color.Gray;
            lblLecturer.TextColor = Color.FromHex("#202020");
            listviewLec.IsVisible = true;
            listview.IsVisible = cvCategory.IsVisible = false;
        }
    }

When you click on topic, topic page will open. This page will run video onloading. 

Follow steps to add video in your page.

  1. Install nugget "Plugin.MediaManager.Forms" version 1.1.0 in your main project 
  2. Install nugget "Plugin.MediaManager" version 1.1.0 in Android and IOS Project
  3. Write following code in "MainActivity.cs" in Android project
  4. CrossMediaManager.Current.Init(this);
  5. Write following code in "AppDelegate.cs" in IOS project
  6. CrossMediaManager.Current.Init(this);

Topic.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:mm="clr-namespace:MediaManager.Forms;assembly=MediaManager.Forms"
             x:Class="OnlineCourseUIDesigns.Views.Topic"
             BackgroundColor="#FAFAFA"
             Title="Internet of Things">
    <ContentPage.Content>
        <StackLayout x:Name="sl" Padding="10">
            <Frame HasShadow="True" CornerRadius="20" BorderColor="#f8f8f8" HeightRequest="200" WidthRequest="200" >
            <mm:VideoView x:Name="videoView" Margin="-20,-24" AutoPlay="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                        ShowControls="True" VideoAspect="AspectFill" Source="https://archive.org/download/BigBuckBunny_328/BigBuckBunny_512kb.mp4"/>
            </Frame>
            <Label Text="Title 1 - Video Description" Margin="0,10,0,0" TextColor="#202020" FontSize="16" FontAttributes="Bold"></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."
                   TextColor="Gray" FontSize="16"></Label>
            <Label Text="Title 2 - Explain in detail about video" TextColor="#202020" FontSize="16" FontAttributes="Bold"></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."
                   TextColor="Gray" FontSize="16"></Label>
            <Label Text="Title 3 - Explain in detail about video" TextColor="#202020" FontSize="16" FontAttributes="Bold"></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."
                   TextColor="Gray" FontSize="16"></Label>

        </StackLayout> 
    </ContentPage.Content>
</ContentPage>

Hope this is helpful to you. Please share your feedback in comment section.

-

Comments

Post a Comment

Popular posts from this blog

Explore the UI libraries available for .NET MAUI at no cost.

Image
  In this article, we'll explore some of the free libraries available for .NET MAUI. Please, support my blog by clicking on our sponsors ad! In this article, we'll explore some of the free libraries available for .NET MAUI. I think many developers, when creating applications, seek free or open-source UI libraries that enhance the user experience, are compatible, or at least have support plans for .NET MAUI. That's why today, I want to share some options I found that you can explore and implement in your projects: MauiBlazor  Specifically crafted for .NET MAUI, this library provides Blazor UI components for cross-platform development. Repository: MauiBlazor on GitHub Built on Blazor, this library allows you to create cross-platform applications using C#, HTML, and JavaScript. Note: Ensure to review the documentation and updates to confirm compatibility with your .NET MAUI version. Comet  Initially designed for Xamarin.Forms, Comet is a UI framewor
Read more

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Please, support my blog by clicking on our sponsors ad! Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project ->
Read more

School UI Design using xamarin form

Image
School UI Design using xamarin form All Part of School UI Design: https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_4.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_10.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-fees-gallery-profile.html First add  Fontawesome  in your project. First image is for Dashboard, Second is for TimeTable and last is for Syllabus. Rest of the page will publish in next blog. You can also replace the calendar view with another calendar control as listed below: Calendar Control 1 Calendar Contorl 2 Code is explain in this video First we will change NavigationDrawercolor. In App.xaml add following code in Application.Resources Tag <Application.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="FontAwesom
Read more