Introduction to .NET MAUI UI Controls
.NET Multi-platform App UI (.NET MAUI) provides a comprehensive set of UI controls that enable you to build modern, native, cross-platform applications from a single shared codebase. These controls abstract away platform-specific UI elements, allowing you to focus on your application logic and design.
Whether you need basic input fields, complex layout containers, or interactive elements, .NET MAUI has you covered. This page serves as a guide to the most commonly used UI controls and their capabilities.
Core UI Controls
Layouts
Arrange your UI elements effectively with powerful layout containers.
VerticalStackLayout
HorizontalStackLayout
Grid
FlexLayout
ScrollView
Basic Controls
Essential elements for user interaction and information display.
Label
Button
Entry
Editor
CheckBox
Switch
Slider
Images and Media
Incorporate visual content and multimedia into your applications.
Image
ImageButton
MediaElement
Lists and Collections
Display and interact with collections of data efficiently.
CollectionView
ListView
(for simpler scenarios)CarouselView
Navigation
Enable seamless navigation between different parts of your app.
NavigationPage
TabbedPage
FlyoutPage
(Hamburger Menu)
Input & Selection
Provide users with various ways to input data and make choices.
DatePicker
TimePicker
Picker
(Dropdown)Stepper
RadioButton
Advanced Controls and Concepts
Custom Controls
For unique UI requirements, .NET MAUI allows you to create your own custom controls by extending existing ones or building them from scratch. This empowers you to achieve pixel-perfect designs and specialized functionality.
You can leverage the power of XAML and C# to define the visual tree and behavior of your custom controls.
Tip: Consider using Shell for built-in navigation and app structure simplification.
Styling and Appearance
.NET MAUI offers robust styling capabilities. You can define styles in XAML to ensure a consistent look and feel across your application. This includes setting properties for colors, fonts, padding, margins, and more.
Use ResourceDictionary
to manage your styles efficiently and apply them to multiple controls.
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="{DynamicResource PrimaryColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="CornerRadius" Value="5" />
</Style>
Community Resources and Examples
The .NET MAUI community is a vibrant source of knowledge and inspiration. Explore the following resources to find practical examples, tutorials, and discussions: