Common Controls

Analogy categoryAnalogies

Core Input and Display Controls

MAUI's common controls fall into display controls (Label, Image, BoxView, ActivityIndicator, ProgressBar) and interactive controls (Button, Entry, Editor, Switch, Slider, Picker, DatePicker, CheckBox). Every control derives from View and exposes shared properties like Margin, HorizontalOptions, VerticalOptions, and BackgroundColor, while each control maps to a native platform control through MAUI's handler architecture — a Button becomes a UIButton on iOS, a MaterialButton on Android, and a Button on Windows via WinUI.

🏏

Cricket analogy: MAUI mapping a Button to native UIButton or MaterialButton is like a franchise fielding the same player, say Jasprit Bumrah, under different league jerseys — IPL, ODI, Test whites — the underlying skill maps to a platform-specific uniform.

CollectionView and Lists

CollectionView replaced the older ListView as MAUI's primary list control, offering ItemsSource binding, ItemTemplate (optionally with a DataTemplateSelector for heterogeneous items), and ItemsLayout that can be LinearItemsLayout (vertical or horizontal list) or GridItemsLayout (a wrapping grid with a fixed Span). Unlike ListView, CollectionView virtualizes its items by default for performance and supports incremental loading via RemainingItemsThreshold and the RemainingItemsThresholdReached event, plus built-in SelectionMode (None, Single, Multiple) instead of requiring manual ItemTapped handling.

🏏

Cricket analogy: CollectionView's virtualization is like a stadium only printing scorecards for the overs currently being bowled instead of the whole match in advance, loading RemainingItemsThreshold overs ahead just before the crowd needs them.

xaml

<CollectionView ItemsSource="{Binding Products}"
                SelectionMode="Single"
                RemainingItemsThreshold="5"
                RemainingItemsThresholdReachedCommand="{Binding LoadMoreCommand}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="8" RowDefinitions="Auto,Auto">
                <Image Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="120" />
                <Label Grid.Row="1" Text="{Binding Name}" FontAttributes="Bold" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Buttons, Switches, and Activity Indicators

Button exposes Clicked and Pressed/Released events plus a Command/CommandParameter pair for MVVM binding, while Switch and CheckBox expose a two-way bindable IsToggled/IsChecked property. ActivityIndicator and ProgressBar communicate ongoing work — ActivityIndicator shows an indeterminate spinner via IsRunning, while ProgressBar shows determinate completion through its Progress property (a double between 0 and 1), and both should be paired with IsBusy flags on the ViewModel so the UI thread never blocks during async operations.

🏏

Cricket analogy: Button's Command/CommandParameter pair is like a captain's decision review system — pressing the button sends a specific parameter, the exact delivery number, back to the third umpire's ViewModel for review.

Never call .Result or .Wait() on an async operation triggered from a Button's Clicked handler or Command — this blocks the UI thread and can deadlock the app. Always await the async call, and toggle an IsBusy flag around it so ActivityIndicator/ProgressBar can give the user feedback while the UI stays responsive.

CollectionView virtualizes items by default and replaces the older ListView
ItemsLayout can be LinearItemsLayout or GridItemsLayout with a fixed Span
SelectionMode (None/Single/Multiple) replaces manual ItemTapped wiring
DataTemplateSelector renders heterogeneous item types with different templates
Button supports Clicked/Pressed/Released events plus Command/CommandParameter
ActivityIndicator shows indeterminate work; ProgressBar shows a 0-1 determinate value
Pair IsBusy with ActivityIndicator to keep the UI responsive during async work