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
Please, support my blog by clicking on our sponsors ad! IF you need this project DM me on whatsaap "9724784544" 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 account, configuring the necessary dependencies, and writing the required code for Android and iOS.  Setting Up a Firebase Account Go to Firebase Console: Navigate to the Firebase ...
Read more

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 framew...
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