.NET MAUI › Desktop - WinUI & Mac Catalyst

How do you adapt UI for desktop vs mobile in MAUI?

Intermediate

Answer

Use DeviceInfo.Idiom/OnIdiom to branch layout, provide larger hit targets and multi-column layouts on desktop, add menus (MenuBarItems) and keyboard accelerators, and handle window resizing with responsive Grids. Test pointer hover states, which don't exist on touch.

<ContentPage.MenuBarItems>
    <MenuBarItem Text="File">
        <MenuFlyoutItem Text="New" Command="{Binding NewCommand}" />
    </MenuBarItem>
</ContentPage.MenuBarItems>

Real-world example The desktop build gains a File menu and a two-pane layout, while phones keep a single-column stacked UI.

Common follow-ups: How do you add a menu bar? | What input differs on desktop?

Responsive UI Windows Desktop - WinUI & Mac Catalyst