In this example we are going to see TimePicker 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.TimePickerEXP1"
Title="TimePickerEXP1">
<VerticalStackLayout>
<TimePicker></TimePicker>
</VerticalStackLayout>
</ContentPage>
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see DatePicker 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.DatePickerEXP1"
Title="DatePickerEXP1">
<VerticalStackLayout>
<DatePicker></DatePicker>
</VerticalStackLayout>
</ContentPage>
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see Switch 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
In this example we are going to see Stepper 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.StepperEXP1"
Title="StepperEXP1">
<VerticalStackLayout>
<Stepper x:Name="StepperName" Maximum="20" Minimum="2" Increment="2"
ValueChanged="StepperName_ValueChanged"></Stepper>
<Label x:Name="lblData"></Label>
</VerticalStackLayout>
</ContentPage>
2) Go to .CS page and update as below.
namespace MauiApp1;
public partial class StepperEXP1 : ContentPage
{
public StepperEXP1()
{
InitializeComponent();
}
private void StepperName_ValueChanged(object sender, ValueChangedEventArgs e)
{
if(StepperName!=null)
{
lblData.Text = StepperName.Value.ToString();
}
}
}
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see Slider 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.SliderEXP1"
Title="SliderEXP1">
<VerticalStackLayout>
<Slider x:Name="SliderName"
Minimum="0" Maximum="10" MinimumTrackColor="Red" MaximumTrackColor="Green"
ThumbColor="Yellow" ValueChanged="SliderName_ValueChanged"></Slider>
<Label x:Name="lblSlider"></Label>
</VerticalStackLayout>
</ContentPage>
2) Go to .CS page and update as below.
namespace MauiApp1;
public partial class SliderEXP1 : ContentPage
{
public SliderEXP1()
{
InitializeComponent();
}
private void SliderName_ValueChanged(object sender, ValueChangedEventArgs e)
{
lblSlider.Text = SliderName.Value.ToString();
}
}
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see SearchBar 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.SearchBarEXP1"
Title="SearchBarEXP1">
<VerticalStackLayout>
<SearchBar x:Name="SearchBarName"
SearchButtonPressed="SearchBarName_SearchButtonPressed"></SearchBar>
</VerticalStackLayout>
</ContentPage>
2) Go to .CS page and update as below.
namespace MauiApp1;
public partial class SearchBarEXP1 : ContentPage
{
public SearchBarEXP1()
{
InitializeComponent();
}
private void SearchBarName_SearchButtonPressed(object sender, EventArgs e)
{
DisplayAlert("Search Alert", SearchBarName.Text, "OK");
}
}
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see DisplayAlert 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.DisplayAlertEXP1"
Title="DisplayAlertEXP1">
<VerticalStackLayout>
<Button x:Name="BtnClick" Text="Click" Clicked="BtnClick_Clicked"></Button>
</VerticalStackLayout>
</ContentPage>
2) Go to .CS page and update as below.
namespace MauiApp1;
public partial class DisplayAlertEXP1 : ContentPage
{
public DisplayAlertEXP1()
{
InitializeComponent();
}
private void BtnClick_Clicked(object sender, EventArgs e)
{
DisplayAlert("Alert", "You are Clicked on Button", "Ok");
}
}
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see ImageButton 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.ImageButtonEXP1"
Title="ImageButtonEXP1">
<VerticalStackLayout>
<ImageButton x:Name="ImgButton" Source="logo.png" Clicked="ImgButton_Clicked"></ImageButton>
</VerticalStackLayout>
</ContentPage>
2) Go to .CS pageand update as below.
namespace MauiApp1;
public partial class ImageButtonEXP1 : ContentPage
{
public ImageButtonEXP1()
{
InitializeComponent();
}
private void ImgButton_Clicked(object sender, EventArgs e)
{
DisplayAlert("Alert", "Clicked on Image Button","Ok");
}
}
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see WebView 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.WebViewEXP1"
Title="WebViewEXP1">
<ScrollView>
<VerticalStackLayout>
<WebView HeightRequest="500" Source="https://adi-dotnet.blogspot.com/"></WebView>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see Image 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.ImageEXP1"
Title="ImageEXP1">
<VerticalStackLayout>
<Image Source="logo.png" ></Image>
<Frame Margin="5" BackgroundColor="Red">
<Image Source="logo.png" ></Image>
</Frame>
</VerticalStackLayout>
</ContentPage>
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see Border 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.BorderEXP1"
Title="BorderEXP1">
<VerticalStackLayout>
<Border Stroke="red" StrokeThickness="4" BackgroundColor="Green">
<Border.StrokeShape>
<RoundRectangle CornerRadius="40,0,0,40"></RoundRectangle>
</Border.StrokeShape>
<Label
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</Border>
</VerticalStackLayout>
</ContentPage>
Output:
In this example we are going to see Path 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.PathEXP1"
Title="PathEXP1">
<VerticalStackLayout>
<Path Aspect="Uniform" Data="M 10,100 L 100,100 100,50Z" HorizontalOptions="Center" Stroke="red"></Path>
</VerticalStackLayout>
</ContentPage>
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see ScrollView 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.ScrollViewEXP1"
Title="ScrollViewEXP1">
<ScrollView>
<VerticalStackLayout Spacing="40">
<Label
Text="1"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="2"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="3"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="4"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="5"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="6"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="7"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="8"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="9"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="10"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="11"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="12"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="13"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="14"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="15"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label
Text="16"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Output:
Code in Github: https://github.com/adi501/MAUI
In this example we are going to see Polyline 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.PolylineEXP1"
Title="PolylineEXP1">
<VerticalStackLayout>
<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30" Stroke="red"></Polyline>
</VerticalStackLayout>
</ContentPage>
Output:
Code in Github: https://github.com/adi501/MAUI
