TableView Example in MAUI

  In this example we are going to see TableView Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.TableViewEXP1"

             Title="TableViewEXP1">

    <VerticalStackLayout>

        <TableView Intent="Data">

            <TableRoot>

                <TableSection  Title="Basic Information 1">

                    <TextCell Text="Name" Detail="Umair Hassan" ></TextCell>

                    <EntryCell Label="Title" Placeholder="(e.g. Shopping)"></EntryCell>

                    <SwitchCell Text="Notifications" On="True"></SwitchCell>

                </TableSection>

                <TableSection  Title="Basic Information 2">

                    <TextCell Text="Name" Detail="Umair Hassan" ></TextCell>

                    <EntryCell Label="Title" Placeholder="(e.g. Shopping)"></EntryCell>

                    <SwitchCell Text="Notifications" On="True"></SwitchCell>

                </TableSection>

            </TableRoot>

        </TableView>

    </VerticalStackLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

Picker Example in MAUI

 In this example we are going to see Picker Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.PickerEXP1"

             Title="PickerEXP1">

    <VerticalStackLayout>

        <Picker x:Name="PickerName" BackgroundColor="Aqua" ></Picker>

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS page and update as below.

namespace MauiApp1;

public partial class PickerEXP1 : ContentPage

{

public PickerEXP1()

{

InitializeComponent();

List<String> Names = new List<string>();

Names.Add("Adi");

Names.Add("Pavan");

        Names.Add("Madhan");

        Names.Add("Yagnesh");

        Names.Add("Nani");

        PickerName.ItemsSource = Names;

    }

}

Output:

Code in Github: https://github.com/adi501/MAUI

CollectionView Example in MAUI

  In this example we are going to see CollectionView Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.CollectionViewEXP1"

             Title="CollectionViewEXP1">

    <VerticalStackLayout>

        <CollectionView x:Name="CollectionViewName" SelectionMode="Multiple" >

            <CollectionView.ItemTemplate>

                <DataTemplate>

                    <StackLayout>

                        <StackLayout>

                            <Frame Margin="20" BorderColor="Gray"

                                   CornerRadius="5" HasShadow="True"

                                   HeightRequest="200" HorizontalOptions="Center"

                                   VerticalOptions="CenterAndExpand">

                                <StackLayout>

                                    <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" ></Label>

                                    <Image Source="{Binding Image}" Aspect="AspectFill" HeightRequest="200" WidthRequest="200" HorizontalOptions="Center" ></Image>

                                    <Label Text="{Binding Details}" ></Label>

                                </StackLayout>

                            </Frame>

                        </StackLayout>

                    </StackLayout>

                </DataTemplate>

            </CollectionView.ItemTemplate>

        </CollectionView>

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS page and update as below.

using System.Collections.ObjectModel;

namespace MauiApp1;

public partial class CollectionViewEXP1 : ContentPage

{

    public ObservableCollection<Car> Cars { get; set; } = new ObservableCollection<Car>();

    public CollectionViewEXP1()

{

InitializeComponent();

        Car objCars = new Car { Name = "Tata Nexon", Details = "Tata nexon Details", Image = "car1.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Kia Sonet", Details = "Kia Sonet Details", Image = "car2.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Tata Altroz", Details = "Tata Altroz Details", Image = "car3.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Hyundai Alcazar", Details = "Hyundai Alcazar Details", Image = "car4.jfif" };

        Cars.Add(objCars);

        CollectionViewName.ItemsSource = Cars;

    }

}

Output:

Code in Github: https://github.com/adi501/MAUI

ListView Example in MAUI

  In this example we are going to see ListView Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.ListViewEXP1"

             Title="ListViewEXP1">

    <VerticalStackLayout>

        <ListView x:Name="ListViewName" HasUnevenRows="True">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <ViewCell>

                        <StackLayout>

                            <Frame Margin="20" BorderColor="Gray"

                                   CornerRadius="5" HasShadow="True"

                                   HeightRequest="200" HorizontalOptions="Center"

                                   VerticalOptions="CenterAndExpand">

                                <StackLayout>

                                    <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" ></Label>

                                    <Image Source="{Binding Image}" Aspect="AspectFill" HeightRequest="200" WidthRequest="200" HorizontalOptions="Center" ></Image>

                                    <Label Text="{Binding Details}" ></Label>

                                </StackLayout>

                            </Frame>

                        </StackLayout>

                    </ViewCell>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS page and update as below.

using System.Collections.ObjectModel;

namespace MauiApp1;

public partial class ListViewEXP1 : ContentPage

{

    public ObservableCollection<Car> Cars { get; set; } = new ObservableCollection<Car>();

    public ListViewEXP1()

{

InitializeComponent();

        Car objCars = new Car { Name = "Tata Nexon", Details = "Tata nexon Details", Image = "car1.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Kia Sonet", Details = "Kia Sonet Details", Image = "car2.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Tata Altroz", Details = "Tata Altroz Details", Image = "car3.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Hyundai Alcazar", Details = "Hyundai Alcazar Details", Image = "car4.jfif" };

        Cars.Add(objCars);

        ListViewName.ItemsSource = Cars;

    }

}

Output:

Code in Github: https://github.com/adi501/MAUI

CarouselView Example in MAUI

 In this example we are going to see CarouselView Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.CarouselviewEXP1"

             Title="CarouselviewEXP1">

    <VerticalStackLayout>

        <IndicatorView x:Name="carsIndicator" HorizontalOptions="Center" IndicatorColor="LightGray" SelectedIndicatorColor="Gray" IndicatorsShape="Square" Margin="0,50,0,0" VerticalOptions="FillAndExpand" />

        <CarouselView ItemsSource="{Binding Cars}" IndicatorView="{x:Reference carsIndicator}">

            <CarouselView.ItemTemplate>

                <DataTemplate>

                    <StackLayout>

                        <Frame HasShadow="True" BorderColor="DarkGray" CornerRadius="5" Margin="20" HeightRequest="300" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">

                            <StackLayout>

                                <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" />

                                <Image Source="{Binding Image}" Aspect="AspectFill" HeightRequest="200" WidthRequest="200" HorizontalOptions="Center" />

                                <Label Text="{Binding Details}" />

                            </StackLayout>

                        </Frame>

                    </StackLayout>

                </DataTemplate>

            </CarouselView.ItemTemplate>

        </CarouselView>

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS page and update as below.

using System.Collections.ObjectModel;

namespace MauiApp1;

public partial class CarouselviewEXP1 : ContentPage

{

    public ObservableCollection<Car> Cars { get; set; } = new ObservableCollection<Car>();

    public CarouselviewEXP1()

    {

        InitializeComponent();

        BindingContext = this;

    }

    protected override void OnAppearing()

    {

        Car objCars = new Car { Name = "Tata Nexon", Details = "Tata nexon Details", Image = "car1.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Kia Sonet", Details = "Kia Sonet Details", Image = "car2.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Tata Altroz", Details = "Tata Altroz Details", Image = "car3.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Hyundai Alcazar", Details = "Hyundai Alcazar Details", Image = "car4.jfif" };

        Cars.Add(objCars);

    }

}

public class Car

{

    public string Name { get; set; }

    public string Details { get; set; }

    public string Image { get; set; }

}

Output:

Code in Github: https://github.com/adi501/MAUI

ProgressBar Example in MAUI

 In this example we are going to see ProgressBar Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.ProgressBarEXP1"

             Title="ProgressBarEXP1">

    <VerticalStackLayout>

        <ProgressBar Progress=".5"></ProgressBar>

    </VerticalStackLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

ActivityIndicator Example in MAUI

 In this example we are going to see ActivityIndicator Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.SwitchEXP1"

             Title="SwitchEXP1">

    <VerticalStackLayout>

        <Switch x:Name="Switch" Toggled="Switch_Toggled" ></Switch>

        <Label x:Name="lblData"></Label>

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS page and update as below.

namespace MauiApp1;

public partial class SwitchEXP1 : ContentPage

{

public SwitchEXP1()

{

InitializeComponent();

}

private void Switch_Toggled(object sender, ToggledEventArgs e)

{

if (Switch.IsToggled)

{

lblData.Text = "On";

}

else

{

lblData.Text = "OFF";

        }

    }

}

Output:

Code in Github: https://github.com/adi501/MAUI

Editor Example in MAUI

 In this example we are going to see Editor Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.EditorEXP1"

             Title="EditorEXP1">

    <VerticalStackLayout>

        <Editor AutoSize="TextChanges"></Editor>

    </VerticalStackLayout>

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

Entry Example in MAUI

In this example we are going to see Entry Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.EntryEXP1"

             Title="EntryEXP1">

    <VerticalStackLayout>

        <Label 

            Text="Name:"

            VerticalOptions="Center" 

            HorizontalOptions="Center" />

        <Entry x:Name="ExtryName" Placeholder="Name" PlaceholderColor="Green"

            Keyboard="Text"   ></Entry>

        <Label 

            Text="Password:"

            VerticalOptions="Center" 

            HorizontalOptions="Center" />

        <Entry x:Name="ExtryPWD" Placeholder="Password" PlaceholderColor="Green"

              IsPassword="True" ></Entry>

        <Label 

            Text="Cell:"

            VerticalOptions="Center" 

            HorizontalOptions="Center" />

        <Entry x:Name="ExtryCell" Placeholder="Cell No" PlaceholderColor="Green"

             Keyboard="Numeric" TextChanged="ExtryCell_TextChanged" Completed="ExtryCell_Completed" ></Entry>

       

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS page and update as below.

namespace MauiApp1;

public partial class EntryEXP1 : ContentPage

{

public EntryEXP1()

{

InitializeComponent();

}

private void ExtryCell_TextChanged(object sender, TextChangedEventArgs e)

{

DisplayAlert("TextChanged", ExtryCell.Text, "OK");

}

private void ExtryCell_Completed(object sender, EventArgs e)

{

        DisplayAlert("Completed", ExtryCell.Text, "OK");

    }

}

Output:

Code in Github: https://github.com/adi501/MAUI