School UI Design using xamarin form
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
Code is explain in this video
Marks.Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SchoolUIDesigns.Views.Marks"
xmlns:dg="clr-namespace:Xamarin.Forms.DataGrid;assembly=Xamarin.Forms.DataGrid"
Title="Exam Result">
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<dg:DataGrid x:Name="dataGrid" RowHeight="50" HeaderHeight="50"
BorderColor="#F2f2f2" HeaderTextColor="#08457E">
<x:Arguments>
<ListViewCachingStrategy>RetainElement</ListViewCachingStrategy>
</x:Arguments>
<dg:DataGrid.Columns>
<dg:DataGridColumn Title="Name" PropertyName="Name" Width="2*" HorizontalContentAlignment="Start" />
<dg:DataGridColumn Title="Marks" PropertyName="Marks" Width="1*"/>
<dg:DataGridColumn Title="Required" PropertyName="Required" Width="1*"/>
<dg:DataGridColumn Title="Out Of" PropertyName="OutOf" Width="1*"/>
</dg:DataGrid.Columns>
<dg:DataGrid.RowsBackgroundColorPalette>
<dg:PaletteCollection>
<Color>#FFFFFF</Color>
</dg:PaletteCollection>
</dg:DataGrid.RowsBackgroundColorPalette>
</dg:DataGrid>
<Grid HorizontalOptions="End" VerticalOptions="EndAndExpand" Padding="20" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto">
<Label Grid.Row="0" Grid.Column="0" Text="Total Marks:" TextColor="#202020" FontAttributes="Bold"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="700" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Out of Marks:" TextColor="#202020" FontAttributes="Bold"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="1000" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Percentage:" TextColor="#202020" FontAttributes="Bold"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="70%" TextColor="#202020"></Label>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>Marks.Xaml.cs
public partial class Marks : ContentPage
{
public Marks()
{
InitializeComponent();
dataGrid.ItemsSource = new ExamModel().Get();
}
}Class for Marks
public class ExamViewModel
{
public string Name { get; set; }
public string Marks { get; set; }
public string Required { get; set; } = "35";
public string OutOf { get; set; } = "100";
}
public class ExamModel
{
public List<ExamViewModel> Get()
{
var list = new List<ExamViewModel>();
list.Add(new ExamViewModel { Name = "Software Engineering",Marks = "56" });
list.Add(new ExamViewModel { Name = "Data Structure", Marks = "70" });
list.Add(new ExamViewModel { Name = "SEO", Marks = "40" });
list.Add(new ExamViewModel { Name = "Android Programming ", Marks = "50" });
list.Add(new ExamViewModel { Name = "Internet of Things ", Marks = "55" });
list.Add(new ExamViewModel { Name = "Computer Organization ", Marks = "68" });
list.Add(new ExamViewModel { Name = "Data Mining", Marks = "78" });
list.Add(new ExamViewModel { Name = "RDBMS", Marks = "45" });
list.Add(new ExamViewModel { Name = "Data Structure using C", Marks = "52" });
list.Add(new ExamViewModel { Name = "Data Structure using C", Marks = "78" });
list.Add(new ExamViewModel { Name = "Data Structure using C", Marks = "58" });
return list;
}
}Holiday.Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:model="clr-namespace:SchoolUIDesigns.ViewModels"
x:Class="SchoolUIDesigns.Views.Holiday"
Title="Holidays 2022">
<ContentPage.Content>
<StackLayout>
<ListView x:DataType="model:HolidayViewModel" x:Name="listView" ItemSelected="ListView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="20">
<Label >
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Date}" FontAttributes="Bold" TextColor="#08457E" />
<Span Text=" - "/>
<Span Text="{Binding Name}" TextColor="#202020" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>Holiday.Xaml.cs
public partial class Holiday : ContentPage
{
public Holiday()
{
InitializeComponent();
listView.ItemsSource = new HolidayModel().Get();
}
private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if(listView.SelectedItem != null)
{
listView.SelectedItem = null;
}
}
}Class for Holiday
public class HolidayViewModel
{
public string Date { get; set; }
public string Name { get; set; }
}
public class HolidayModel
{
public List<HolidayViewModel> Get()
{
List<HolidayViewModel> list = new List<HolidayViewModel>();
list.Add(new HolidayViewModel { Name = "New Year Day", Date = "1 Jan" });
list.Add(new HolidayViewModel { Name = "Lohri", Date = "13 Jan" });
list.Add(new HolidayViewModel { Name = "Pongal", Date = "14 Jan" });
list.Add(new HolidayViewModel { Name = "Makar Sankranti", Date = "14 Jan" });
list.Add(new HolidayViewModel { Name = "Republic Day", Date = "26 Jan" });
list.Add(new HolidayViewModel { Name = "Lunar New Year", Date = "1 Feb" });
list.Add(new HolidayViewModel { Name = "Vasant Panchami", Date = "5 Feb" });
list.Add(new HolidayViewModel { Name = "Holika Dahana", Date = "17 Mar" });
list.Add(new HolidayViewModel { Name = "Gudi Padava", Date = "2 Apr" });
list.Add(new HolidayViewModel { Name = "Ram Navami", Date = "10 Apr" });
list.Add(new HolidayViewModel { Name = "Good Friday", Date = "15 Apr" });
list.Add(new HolidayViewModel { Name = "Raksha Bhandhan", Date = "11 Aug" });
return list;
}
}Please share your feedback in comment section
Comments
Post a Comment