How do I create a UI dashboard For School App? Xamarin Forms makes it easy to create an app that can target Android, iOS, and Windows.
How do I create a UI dashboard?
- https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form.html
- https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-fees-gallery-profile.html
- https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_10.html
- https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_4.html
Fontawesome:
https://xamarinuidesigns.blogspot.com/2022/02/create-font-awesome-icon-in-xamarin-form.html
Please watch this video to understand code.
First we will create Template.
ImageButton.xaml
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SchoolUIDesigns.Control.ImageButton">
<ContentView.Content>
<Grid RowDefinitions="25,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label x:Name="lblIcon" Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="20" ></Label>
<Label x:Name="lblText" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</ContentView.Content>
</ContentView>ImageButton.xaml.cs
public partial class ImageButton : ContentView
{
public event EventHandler Clicked;
public ImageButton()
{
InitializeComponent();
TapGestureRecognizer tap = new TapGestureRecognizer();
tap.Command = new Command(OnClicked);
GestureRecognizers.Add(tap);
}
public void OnClicked(object sender)
{
if (Clicked != null)
{
this.Clicked(this, EventArgs.Empty);
}
}
public string Icon
{
get
{
return lblIcon.Text;
}
set
{
lblIcon.Text = value;
}
}
public string Text
{
get
{
return lblText.Text;
}
set
{
lblText.Text = value;
}
}
}BannerTemplate.xaml
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SchoolUIDesigns.Views.Design.Template.BannerTemplate">
<ContentView.Content>
<StackLayout HorizontalOptions="FillAndExpand">
<Image Source="{Binding URL}" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
</StackLayout>
</ContentView.Content>
</ContentView>Now create a dashboard class to show banner
DashboardViewModel.cs
public class DashboardViewModel
{
public string URL { get; set; }
}
public class DashboardModel
{
public List<DashboardViewModel> GetBannerList()
{
List<DashboardViewModel> list = new List<DashboardViewModel>();
list.Add(new DashboardViewModel { URL = "https://as1.ftcdn.net/v2/jpg/04/29/93/28/1000_F_429932887_ZSdOvhqNb1bhDa7twCKRySQ1hvVtMSsl.jpg" });
list.Add(new DashboardViewModel { URL = "https://as1.ftcdn.net/v2/jpg/04/24/51/46/1000_F_424514620_iiZHVadYjpe4k3PQg8qhixUXOuAP5MEd.jpg" });
list.Add(new DashboardViewModel { URL = "https://media.istockphoto.com/vectors/online-school-digital-internet-tutorials-and-courses-online-education-vector-id1218933779" });
return list;
}
}Create a main form - Dashboard.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SchoolUIDesigns.Views.Design.Dashboard1"
xmlns:fontawesome="clr-namespace:SchoolUIDesigns.Utility"
xmlns:control="clr-namespace:SchoolUIDesigns.Control"
xmlns:template="clr-namespace:SchoolUIDesigns.Views.Design.Template"
Title="Dashboard"
BackgroundColor="#F0F3FB"
Shell.NavBarIsVisible="False">
<ContentPage.Content>
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" >
<Frame BackgroundColor="White" CornerRadius="20" Margin="0,-10,0,0" HeightRequest="60" Grid.Row="0">
<Grid ColumnDefinitions="*,Auto,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
<Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E" ></Label>
<Label Grid.Column="1" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesomeSolid}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20" ></Label>
<Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray" ></Label>
<Label Grid.Column="3" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesomeSolid}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20" ></Label>
<Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray" ></Label>
</Grid>
</Frame>
<Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" Margin="10,10,10,0">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesomeSolid}" Text="{x:Static fontawesome:Solid.User}" FontSize="20" ></Label>
<Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesomeSolid}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesomeSolid}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20" ></Label>
<Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
</Grid>
</Frame>
<Grid Margin="10" Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*" RowSpacing="10" ColumnSpacing="10">
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<control:ImageButton Text="Syllabus" Margin="10" Icon="{x:Static fontawesome:Solid.Table}"/>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<control:ImageButton Text="Test" Margin="10" Icon="{x:Static fontawesome:Solid.Th_List}"/>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<control:ImageButton Text="Notice" Margin="10" Icon="{x:Static fontawesome:Solid.Edit}"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<control:ImageButton Text="Fees" Margin="10" Icon="{x:Static fontawesome:Solid.Pallet}"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<control:ImageButton Text="Gallery" Margin="10" Icon="{x:Static fontawesome:Solid.Boxes}"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<control:ImageButton Text="Profile" Margin="10" Icon="{x:Static fontawesome:Solid.Money_Bill}"/>
</Frame>
</Grid>
<Frame Grid.Row="3" Margin="10" CornerRadius="20" >
<CarouselView x:Name="cvBanner" Margin="-20" HeightRequest="120" Grid.Row="1" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"></LinearItemsLayout>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<template:BannerTemplate/>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Frame>
<Frame Grid.Row="4" Margin="10" CornerRadius="10" BackgroundColor="#08457E">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
</Grid>
</Frame>
</Grid>
</ContentPage.Content>
</ContentPage>Dashboard.xaml.cs
public Dashboard1()
{
InitializeComponent();
var list = new DashboardModel().GetBannerList();
cvBanner.ItemsSource = list;
Device.StartTimer(TimeSpan.FromSeconds(5), (Func<bool>)(() =>
{
cvBanner.Position = (cvBanner.Position + 1) % list.Count;
return true;
}));
}Please watch this video to understand code.
Hope you like this video, Please share your feedback in comment section.
Posts
Comments
Post a Comment