RadioButton
The radioButton permits the user to choose only one option from a set of options. These, to be made exclusive, can be grouped by specifying GroupName attribute.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppExample.RadioButtonPage">
<StackLayout Padding="20">
<Label Text="Select a drink" FontSize="Large" HorizontalOptions="Center" />
<!-- Radio Buttons for selecting a drink -->
<RadioButton Content="Tea" GroupName="DrinkGroup" CheckedChanged="OnCheckedChanged" />
<RadioButton Content="Coffee" GroupName="DrinkGroup" CheckedChanged="OnCheckedChanged" />
<RadioButton Content="Juice" GroupName="DrinkGroup" CheckedChanged="OnCheckedChanged" />
<!-- Label to display selected drink -->
<Label x:Name="SelectedDrinkLabel" FontSize="Medium" TextColor="Green" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
Content: The label or message that you want to show right beside the radio button.GroupName="DrinkGroup": Cluster these radio buttons so that only one can be checked.CheckedChanged="OnCheckedChanged": Event handler used when the selection changes.
namespace MauiAppExample
{
public partial class RadioButtonPage : ContentPage
{
public RadioButtonPage()
{
InitializeComponent();
}
private void OnCheckedChanged(object sender, CheckedChangedEventArgs e)
{
if (e.Value)
{
RadioButton rb = (RadioButton)sender;
SelectedDrinkLabel.Text = $"You selected: {rb.Content}";
}
}
}
}
Picker
The Picker comes out as a list selection component, which works like a drop down.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppExample.PickerPage">
<StackLayout Padding="20">
<Label Text="Choose a country" FontSize="Large" HorizontalOptions="Center" />
<Picker x:Name="CountryPicker" Title="Select a country">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>USA</x:String>
<x:String>Canada</x:String>
<x:String>UK</x:String>
<x:String>Australia</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</StackLayout>
</ContentPage>
TableView
The TableView places elements on TL-rows and can be used in a form or a settings page. It also includes TableSections.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppExample.TableViewPage">
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Account Settings">
<TextCell Text="Username" Detail="John Doe" />
<TextCell Text="Email" Detail="[email protected]" />
</TableSection>
<TableSection Title="Preferences">
<SwitchCell Text="Enable Notifications" />
<SwitchCell Text="Dark Mode" />
</TableSection>
</TableRoot>
</TableView>
</ContentPage>CollectionView and ListView
CollectionView used to show a list of items and ListView is also used to show list of items. CollectionView is more modern solution to the problem, more customizable and should be used instead of ListView.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppExample.CollectionViewPage">
<CollectionView ItemsSource="{Binding Fruits}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<Label Text="{Binding}" FontSize="Medium" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>namespace MauiAppExample
{
public partial class CollectionViewPage : ContentPage
{
public CollectionViewPage()
{
InitializeComponent();
BindingContext = this;
}
public List<string> Fruits { get; set; } = new List<string> { "Apple", "Banana", "Orange", "Grape" };
}
}
SwipeView
SwipeView enable adding swipe gestures to any view, most often we use swipe from left to right or from right to left to show the action (for instance, to delete an item).
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppExample.SwipeViewPage">
<SwipeView>
<SwipeView.RightItems>
<SwipeItems>
<SwipeItem Text="Delete" BackgroundColor="Red" Invoked="OnDeleteSwipe" />
</SwipeItems>
</SwipeView.RightItems>
<Grid Padding="10">
<Label Text="Swipe right to delete this item" FontSize="Medium" VerticalOptions="Center" />
</Grid>
</SwipeView>
</ContentPage>namespace MauiAppExample
{
public partial class SwipeViewPage : ContentPage
{
public SwipeViewPage()
{
InitializeComponent();
}
private void OnDeleteSwipe(object sender, EventArgs e)
{
DisplayAlert("Deleted", "The item has been deleted.", "OK");
}
}
}
RefreshView
RefreshView is another popular ingredient used when implementing pull-to-refresh for collections, such as CollectionView or ListView.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppExample.RefreshViewPage">
<RefreshView IsRefreshing="{Binding IsRefreshing}" Command="{Binding RefreshCommand}">
<CollectionView ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding}" FontSize="Medium" Padding="10" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
</ContentPage>using System.Collections.ObjectModel;
using System.Windows.Input;
namespace MauiAppExample
{
public partial class RefreshViewPage : ContentPage
{
public RefreshViewPage()
{
InitializeComponent();
BindingContext = this;
Items = new ObservableCollection<string> { "Item 1", "Item 2", "Item 3" };
RefreshCommand = new Command(OnRefresh);
}
public ObservableCollection<string> Items { get; set; }
public bool IsRefreshing { get; set; }
public ICommand RefreshCommand { get; }
private async void OnRefresh()
{
IsRefreshing = true;
await Task.Delay(2000); // Simulate data refresh delay
Items.Add($"New Item {Items.Count + 1}");
IsRefreshing = false;
OnPropertyChanged(nameof(IsRefreshing));
}
}
}CarouselView and IndicatorView
Based on CarouselView, it is easy to implement swipeable image based galleries or feature highlight screens and with IndicatorView you will have a visual cue for which item in CarouselView is shown.
<?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="MauiAppExample.CarouselViewPage">
<StackLayout Padding="20">
<!-- Header Label -->
<Label Text="Image Carousel Example"
FontSize="Large"
HorizontalOptions="Center"
Margin="0,0,0,20" />
<!-- CarouselView to display images -->
<CarouselView x:Name="ImageCarousel"
ItemsSource="{Binding Images}"
HorizontalOptions="FillAndExpand"
HeightRequest="300">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding}"
Aspect="AspectFill"
HeightRequest="300" />
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<!-- IndicatorView to show current position in the CarouselView -->
<IndicatorView x:Name="ImageIndicator"
IndicatorColor="Gray"
SelectedIndicatorColor="Blue"
HorizontalOptions="Center"
Margin="0,20,0,0" />
</StackLayout>
</ContentPage>using System.Collections.ObjectModel;
namespace MauiAppExample
{
public partial class CarouselViewPage : ContentPage
{
public ObservableCollection<string> Images { get; set; }
public CarouselViewPage()
{
InitializeComponent();
// Initialize image collection
Images = new ObservableCollection<string>
{
"image1.png", // Replace these with actual image paths
"image2.png",
"image3.png",
"image4.png"
};
// Set the binding context for data binding
BindingContext = this;
// Link the CarouselView to the IndicatorView
ImageCarousel.IndicatorView = ImageIndicator;
}
}
}