School UI Design - Fees Gallery Profile using xamarin form

School UI Design using xamarin form
School UI Design using xamarin form

Code is explain in this video

First add Fontawesome in your project.

All Part of School UI Design:


FeesView.Xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Control.FeesView">
  <ContentView.Content>
      <Grid ColumnDefinitions="40,*,Auto" RowDefinitions="Auto,Auto" RowSpacing="0">
            <Label x:Name="lblIcon" Grid.Row="0" Grid.RowSpan="2"  Grid.Column="0" VerticalOptions="Center" TextColor="#202020" 
                   FontFamily="{StaticResource FontAwesomeSolid}" FontSize="20"  ></Label>
            <Label x:Name="lblFees" Grid.Row="0" Grid.Column="1"  VerticalOptions="Start"  
                   TextColor="#08457E"></Label>
            <Label x:Name="lblDescription" Grid.Row="1" Grid.Column="1"  VerticalOptions="Start"  
                   TextColor="LightGray"></Label>
            <Label x:Name="lblRefundable"  Grid.Row="0" Grid.RowSpan="2" Grid.Column="2"   
                   TextColor="#08457E"></Label>
        </Grid>
  </ContentView.Content>
</ContentView>

FeesView.Xaml.cs

    public partial class FeesView : ContentView
    {
        public FeesView()
        {
            InitializeComponent();
        }
        public string Icon
        {
            get
            {
                return lblIcon.Text;
            }
            set
            {
                lblIcon.Text = value;
            }
        }
        public string Fees
        {
            get
            {
                return lblFees.Text;
            }
            set
            {
                lblFees.Text = value;
            }
        }
        public string Description
        {
            get
            {
                return lblDescription.Text;
            }
            set
            {
                lblDescription.Text = value;
            }
        }
        public string Refundable
        {
            get
            {
                return lblRefundable.Text;
            }
            set
            {
                lblRefundable.Text = value;
            }
        }
    }

Fees.Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Views.Fees" 
             BackgroundColor="#F8F8F8"
             xmlns:fontawesome="clr-namespace:SchoolUIDesigns.Utility" 
             xmlns:control="clr-namespace:SchoolUIDesigns.Control"
             Shell.NavBarIsVisible="False">
    <ContentPage.Content>

        <StackLayout HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand" Padding="20" >
            <Grid  HeightRequest="400"  Grid.Row="0">
                <Image Opacity="0.8" Margin="-25,-25,-25,20" Source="https://cdn.pixabay.com/photo/2020/02/19/22/57/blue-background-4863452_1280.jpg"
                           Aspect="AspectFill" ></Image>
                <StackLayout Spacing="10" VerticalOptions="Start" Padding="20">
                    <Label  HorizontalOptions="Center" FontSize="20" FontAttributes="Bold" TextColor="White"  Text="Presidency School"></Label>
                    <Label  HorizontalOptions="Center" Margin="0,40,0,0" TextColor="White" Text="Fees Structure"></Label>
                    <Label  HorizontalOptions="Center" TextColor="White" Text="Fees Structure for the session 2021-22"></Label>
                </StackLayout>
            </Grid>
            <Label Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
                   TextColor="Gray"></Label>
            <ScrollView>
                <StackLayout>
                   
                    <Frame   HasShadow="True" Margin="0,10,0,0" CornerRadius="5" >
                        <Grid VerticalOptions="Center" RowSpacing="15" RowDefinitions="Auto,1,Auto,1,Auto">
                            <Label Grid.Row="0" Text="At the time of admission" FontSize="18" TextColor="#202020" VerticalOptions="Center"></Label>
                            <BoxView Grid.Row="1" BackgroundColor="#f2f2f2"></BoxView>
                            <control:FeesView Grid.Row="2" Icon="{x:Static fontawesome:Solid.Boxes}" Fees="250.00" Description="Registration Charges" Refundable="No Refund" ></control:FeesView>
                            <BoxView Grid.Row="3"   BackgroundColor="#f2f2f2"></BoxView>
                            <control:FeesView Grid.Row="4" Icon="{x:Static fontawesome:Solid.Boxes}" Fees="12500.00" Description="Admission  Charges" Refundable="No Refund" ></control:FeesView>
                        </Grid>
                    </Frame>

                    <Frame   HasShadow="True" Margin="0,10,0,0" CornerRadius="5" >
                        <Grid VerticalOptions="Center" RowSpacing="15" RowDefinitions="Auto,1,Auto,1,Auto">
                            <Label Grid.Row="0" Text="Monthly Charges" FontSize="18" TextColor="#202020" VerticalOptions="Center"></Label>
                            <BoxView Grid.Row="1" BackgroundColor="#f2f2f2"></BoxView>
                            <control:FeesView Grid.Row="2" Icon="{x:Static fontawesome:Solid.Book}" Fees="500.00" Description="Development charges" Refundable="No Refund" ></control:FeesView>
                            <BoxView Grid.Row="3"   BackgroundColor="#f2f2f2"></BoxView>
                            <control:FeesView Grid.Row="4" Icon="{x:Static fontawesome:Solid.Book}" Fees="358.00" Description="Tution Fees" Refundable="No Refund" ></control:FeesView>
                        </Grid>
                    </Frame>

                    <Frame   HasShadow="True" Margin="0,10,0,0" CornerRadius="5" >
                        <Grid VerticalOptions="Center" RowSpacing="15" RowDefinitions="Auto,1,Auto,1,Auto,1,Auto">
                            <Label Grid.Row="0" Text="Hostel Fees Charges" FontSize="18" TextColor="#202020" VerticalOptions="Center"></Label>
                            <BoxView Grid.Row="1" BackgroundColor="#f2f2f2"></BoxView>
                            <control:FeesView Grid.Row="2" Icon="{x:Static fontawesome:Solid.Building}" Fees="250.00" Description="Hostel Caution charges" Refundable="Refundable" ></control:FeesView>
                            <BoxView Grid.Row="3"   BackgroundColor="#f2f2f2"></BoxView>
                            <control:FeesView Grid.Row="4" Icon="{x:Static fontawesome:Solid.Building}" Fees="455.00" Description="Lodging Fees" Refundable="No Refund" ></control:FeesView>
                            <BoxView Grid.Row="5"   BackgroundColor="#f2f2f2"></BoxView>
                            <control:FeesView Grid.Row="6" Icon="{x:Static fontawesome:Solid.Building}" Fees="688.00" Description="Bording Fees" Refundable="No Refund" ></control:FeesView>
                        </Grid>
                    </Frame>
                </StackLayout>
            </ScrollView>
        </StackLayout>

    </ContentPage.Content>
</ContentPage>

Install "Xamarin.Forms.PinchZoomImage" in your project

Gallery.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Views.Gallery"
             xmlns:pinch ="clr-namespace:Xamarin.Forms.PinchZoomImage;assembly=Xamarin.Forms.PinchZoomImage" 
             xmlns:control="clr-namespace:SchoolUIDesigns.Control"
             Title="Gallery"
             BackgroundColor="Black">
    <ContentPage.Content>
        <Grid RowDefinitions="*">
            <CollectionView Grid.Row="0"  SelectionMode="Single"  x:Name="cvGallery" SelectionChanged="cvGallery_SelectionChanged"
                HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical" Span="3"></GridItemsLayout>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate >
                    <DataTemplate>
                        <control:GalleryView></control:GalleryView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            <StackLayout x:Name="sl" Grid.Row="0" IsVisible="false" BackgroundColor="Black" Opacity="0.7">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
            <pinch:PinchZoom x:Name="pinch" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                <pinch:PinchZoom.Content>
                    <Image x:Name="pinchImg" HeightRequest="250" WidthRequest="250" />
                </pinch:PinchZoom.Content>
            </pinch:PinchZoom>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Gallery.Xaml.cs

dddd public partial class Gallery : ContentPage
    {
        public Gallery()
        {
            InitializeComponent();
            cvGallery.ItemsSource = new GalleryModel().Get();
        }

        private void cvGallery_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.CurrentSelection != null)
            {
                sl.IsVisible = pinch.IsVisible = true;
                var data = (GalleryViewModel)e.CurrentSelection[0];
                pinchImg.Source = data.Img;
            }
        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            sl.IsVisible = pinch.IsVisible  = false;
        }
    }

Class for Gallery

    public class GalleryViewModel
    {
        public ImageSource Img { get; set; }
    }

    public class GalleryModel
    {
        public List<GalleryViewModel> Get()
        {
            List<GalleryViewModel> list = new List<GalleryViewModel>();
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWR7fU-Ju22niixgRowQPqmhmMbv-4aKkcJQ" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGzJ5pf0DCv9vt23kzS4bVrD5gdhOxSvS9ew" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSK_5khGWXgQYUQIZOzibWuSgGInxReaCZBgQ" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr3PWzPZ80p4DyexDIpuQB1qZXhCtJ4Qb2bw" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeK0yborsJrdFJJvpRG7puz0M4RCQ_S0Lclg" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWR7fU-Ju22niixgRowQPqmhmMbv-4aKkcJQ" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGzJ5pf0DCv9vt23kzS4bVrD5gdhOxSvS9ew" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSK_5khGWXgQYUQIZOzibWuSgGInxReaCZBgQ" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr3PWzPZ80p4DyexDIpuQB1qZXhCtJ4Qb2bw" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeK0yborsJrdFJJvpRG7puz0M4RCQ_S0Lclg" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWR7fU-Ju22niixgRowQPqmhmMbv-4aKkcJQ" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGzJ5pf0DCv9vt23kzS4bVrD5gdhOxSvS9ew" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSK_5khGWXgQYUQIZOzibWuSgGInxReaCZBgQ" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr3PWzPZ80p4DyexDIpuQB1qZXhCtJ4Qb2bw" });
            list.Add(new GalleryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeK0yborsJrdFJJvpRG7puz0M4RCQ_S0Lclg" });
            return list;
        }
    }

GalleryView.Xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Control.GalleryView">
  <ContentView.Content>
        <StackLayout  Padding="2">
            <Image x:Name="img" Source="{Binding Img}" Aspect="AspectFill" HeightRequest="150" WidthRequest="100"/>
        </StackLayout>
    </ContentView.Content>
</ContentView>

MyProfile.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SchoolUIDesigns.Views.MyProfile"
             Title="My Profile"
             BackgroundColor="#F2F2F3">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" Padding="20"  VerticalOptions="FillAndExpand" ColumnDefinitions="*,*" 
              RowDefinitions="Auto,Auto,Auto,Auto,Auto,1,Auto,Auto,Auto,11,Auto,Auto,Auto">
            <Image Grid.RowSpan="7" Grid.Row="0" Grid.Column="0" Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSK_5khGWXgQYUQIZOzibWuSgGInxReaCZBgQ"
                   HeightRequest="100" WidthRequest="150" Aspect="AspectFill"></Image>
            <Label Grid.Row="1" Grid.Column="1" Text="Address" FontAttributes="Bold" TextColor="#08457E"></Label>
            <Label Grid.Row="2" Margin="20,0,0,0" Grid.Column="1" Text="Om Apartment"  TextColor="Gray"></Label>
            <Label Grid.Row="3" Margin="20,0,0,0" Grid.Column="1" Text="Near Bank" TextColor="Gray"></Label>
            <Label Grid.Row="4" Margin="20,0,0,0" Grid.Column="1" Text="Goa Goa" TextColor="Gray"></Label>
            <BoxView Grid.Row="5" Grid.Column="1" BackgroundColor="LightGray"></BoxView>
            <Label Grid.Row="6" Grid.Column="1" Text="Lorem Ipsum has been the industry's standard dummy text of the printing and typesetting industry of the printing and typesetting industry of the printing and typesetting industry"  TextColor="Gray"></Label>
            <Label Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" Text="Madhuri Wilsion" FontSize="20" TextColor="#202020"></Label>
            <Label Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="2" Text="Class: 1st" Margin="0,-5,0,0" TextColor="Gray" FontSize="12"></Label>
            <BoxView Margin="-20,5" Grid.Row="9" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="LightGray"></BoxView>
            <Frame Grid.Row="10" Grid.ColumnSpan="2" BackgroundColor="White" CornerRadius="5">
                <Grid RowDefinitions="Auto,11,Auto">
                    <Label Grid.Row="0" Text="What is Lorem Ipsum?" TextColor="#08457E" FontAttributes="Bold"></Label>
                    <BoxView Grid.Row="1" Margin="0,5" BackgroundColor="LightGray" ></BoxView>
                    <Label Grid.Row="2"   TextColor="Gray"
                    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"/>
                </Grid>
            </Frame>
            <Frame Grid.Row="11" Grid.ColumnSpan="2" BackgroundColor="White" CornerRadius="5">
                <Grid RowDefinitions="Auto,11,Auto">
                    <Label Grid.Row="0" Text="Title" TextColor="#08457E" FontAttributes="Bold"></Label>
                    <BoxView Grid.Row="1" Margin="0,5" BackgroundColor="LightGray" ></BoxView>
                    <Label Grid.Row="2"   TextColor="Gray"
                    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. "/>
                </Grid>
            </Frame>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Please share your feedback in comment. Thanks for reading

-

Comments

Post a Comment

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. What are Push Notifications? Push notifications are messages sent directly to a user's mobile device from a server, even when the app is not actively being used. They are a crucial part of mobile app development, enabling real-time communication with users. Notifications can inform users about new content, updates, reminders, or other important information, thus enhancing user engagement and retention. Watch video to understand code: Implementing Push Notifications in Android and iOS using .NET MAUI In this blog, we'll explore how to implement push notifications in a .NET MAUI application for both Android and iOS platforms. We'll start by setting up a Firebase ...
Read more

Building User Authentication Interfaces in .NET MAUI: Login, Register, OTP Verification, and Forgot Password

Image
Building User Authentication Interfaces in .NET MAUI: Login, Register, OTP Verification, and Forgot Password  In this blog post, we will explore how to create user authentication interfaces using .NET MAUI (Multi-platform App UI), a framework for building cross-platform applications. We will focus on four essential screens: Login, Register, OTP Verification, and Forgot Password. By the end of this tutorial, you will have a solid foundation for creating secure and user-friendly authentication flows in your .NET MAUI applications. Prerequisites: To follow along with this tutorial, you should have a basic understanding of .NET MAUI and C#. You will also need the .NET MAUI development environment set up on your machine. Before starting with the UI first install nugget "CommunityToolkit.Maui" in your MAUI project. Then initialize in MauiProgram.cs file public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMau...
Read more

Flutter Falls Behind? .NET MAUI Nails Liquid Glass on iOS 26 – Here’s How

Image
Flutter Falls Behind? .NET MAUI Nails Liquid Glass on iOS 26 – Here’s How Introduction Apple shook the developer world with iOS 26's new UI design system: Liquid Glass . A stunning blend of blur, translucency, and motion-responsive effects, it transforms the user interface into a living, breathing visual experience. While most cross-platform frameworks are scrambling to replicate it, .NET MAUI developers have a secret weapon: native handler access . In this blog, we’ll explore: What is Liquid Glass? Why Flutter struggles with it How .NET MAUI makes it possible Real working example of Liquid Glass UI in .NET MAUI for iOS 26 Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. What is Liquid ...
Read more