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