Top 10 UI Patterns in .NET MAUI You Should Know

Top 10 UI Patterns in .NET MAUI You Should Know (with Examples)

💡 Mastering these patterns will not only improve your UI/UX design skills in .NET MAUI, but also help you crack real-world interviews with confidence.

Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community.

🎯 1. Master-Detail Pattern (SplitView)

Use when: You want to display a list of items and the details of a selected item side-by-side.


<Grid>
    <CollectionView x:Name="ItemList" SelectionChanged="OnItemSelected"/>
    <ContentView x:Name="DetailView" />
</Grid>

Master-Detail Pattern (SplitView) .net maui

📋 2. Tabbed Navigation Pattern

Use when: Your app has top-level navigation items (e.g., Home, Profile, Settings).


<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui">
    <ContentPage Title="Home" />
    <ContentPage Title="Profile" />
</TabbedPage>

🧭 3. Hamburger Menu (Flyout) Pattern

Use when: You need a collapsible navigation drawer.


<FlyoutPage>
    <FlyoutPage.Flyout>
        <MenuPage />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <MainPage />
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

Hamburger Menu (Flyout) Pattern .NET MAUI

🖼 4. Card Layout Pattern

Use when: You want to present information grouped in boxes (news feed, product cards).


<Frame CornerRadius="12" Padding="10" HasShadow="True">
    <StackLayout>
        <Image Source="product.jpg" />
        <Label Text="Product Name" FontAttributes="Bold" />
        <Button Text="Buy Now" />
    </StackLayout>
</Frame>

Table of Contents for .Net Maui

📱 5. Carousel Pattern

Use when: You want to display horizontally scrollable content like onboarding screens.


<CarouselView ItemsSource="{Binding Slides}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

📊 6. Dashboard/Grid Pattern

Use when: You want to display key metrics or widgets in a grid format.


<Grid ColumnDefinitions="*,*" RowDefinitions="*,*">
    <Frame Grid.Row="0" Grid.Column="0" BackgroundColor="LightBlue">
        <Label Text="Revenue" />
    </Frame>
    <Frame Grid.Row="0" Grid.Column="1" BackgroundColor="LightGreen">
        <Label Text="Users" />
    </Frame>
</Grid>

🎞 7. Masonry Layout Pattern

Use when: Displaying images/posts with varying heights (Pinterest-style).


<ScrollView>
    <FlexLayout Wrap="Wrap" JustifyContent="Start">
        <Image Source="img1.jpg" WidthRequest="100" HeightRequest="150" />
        <Image Source="img2.jpg" WidthRequest="100" HeightRequest="200" />
    </FlexLayout>
</ScrollView>

🛎 8. Snackbar/Toast Pattern

Use when: Showing temporary messages or alerts.


// Using CommunityToolkit.Maui
Snackbar.Make("Item added", TimeSpan.FromSeconds(3)).Show();

🧑‍🎨 9. Bottom Sheet Modal Pattern

Use when: You want a pop-up with actions or extra info (like Instagram post options).


// Use Rg.Plugins.Popup or custom absolute layout trick

🧠 10. Empty State / Error State Pattern

Use when: There’s no data or an error occurs.


<ContentView IsVisible="{Binding IsEmpty}">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Image Source="empty.png" />
        <Label Text="No data found" />
    </StackLayout>
</ContentView>

Empty State / Error State Pattern .NET MAUI

✅ Summary Table

Pattern	Best Use Case	Controls Used
Master-Detail	List + detail view	Grid, CollectionView
Tabbed Navigation	Primary navigation	TabbedPage
Flyout Menu	Drawer menu	FlyoutPage
Card Layout	Grouped content	Frame, StackLayout
Carousel	Swipeable screens	CarouselView
Dashboard/Grid	Widgets/analytics	Grid
Masonry	Uneven image layouts	FlexLayout
Snackbar/Toast	Temporary messages	CommunityToolkit
Bottom Sheet	Pop-up actions	Popup plugin / Layout
Empty/Error State	No data display	ContentView, StackLayout

🏁 Conclusion

Designing a polished and intuitive user interface is crucial for building successful cross-platform applications, and .NET MAUI provides a versatile toolkit to achieve exactly that. By mastering these top 10 UI patterns—from tabbed and flyout navigation to dynamic layouts like Masonry and responsive dashboards—you equip yourself with the design principles used in real-world apps like Instagram, LinkedIn, and Google Drive.

Whether you're just starting with .NET MAUI or aiming to refine your architecture for scalability, understanding when and how to apply each pattern can drastically enhance your app’s usability and maintainability.