MAUI Cross-Platform UI Design for Tablet and Mobile

Here's a comprehensive approach to creating a responsive MAUI (Multi-platform App UI) that works well on both tablets and mobile devices.

Core Principles for Responsive MAUI Design

1. Adaptive Layouts: Use responsive layouts that adjust based on screen size

2. Device Idiom Detection: Leverage DeviceInfo.Current.Idiom to customize UI

3. Orientation Awareness: Handle portrait and landscape modes

4. Scalable Components: Use components that scale appropriately

Implementation Approach

1. XAML Structure with Responsive Controls

xml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">
    
    <Grid>
        <!-- Base layout that works for all devices -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/> <!-- Header -->
            <RowDefinition Height="*"/>    <!-- Main content -->
            <RowDefinition Height="Auto"/> <!-- Footer/Navigation -->
        </Grid.RowDefinitions>

        <!-- Header -->
        <Label Text="My App" 
               Style="{StaticResource HeaderStyle}"
               Grid.Row="0"/>

        <!-- Main content area - will be customized per device -->
        <ScrollView Grid.Row="1">
            <OnIdiom x:TypeArguments="View">
                <OnIdiom.Phone>
                    <StackLayout>
                        <!-- Mobile-optimized content -->
                    </StackLayout>
                </OnIdiom.Phone>
                <OnIdiom.Tablet>
                    <Grid ColumnDefinitions="*,*">
                        <!-- Tablet-optimized two-column layout -->
                    </Grid>
                </OnIdiom.Tablet>
            </OnIdiom>
        </ScrollView>

        <!-- Footer/Navigation -->
        <Grid Grid.Row="2">
            <OnIdiom x:TypeArguments="View">
                <OnIdiom.Phone>
                    <!-- Bottom tab bar for mobile -->
                </OnIdiom.Phone>
                <OnIdiom.Tablet>
                    <!-- Sidebar or expanded navigation for tablet -->
                </OnIdiom.Tablet>
            </OnIdiom>
        </Grid>
    </Grid>
</ContentPage>

2. Code-Behind for Dynamic Adjustments

csharp

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        AdjustUIForDevice();
        
        // Handle orientation changes
        DeviceDisplay.Current.MainDisplayInfoChanged += OnMainDisplayInfoChanged;
    }

    private void AdjustUIForDevice()
    {
        var deviceInfo = DeviceInfo.Current;
        
        if (deviceInfo.Idiom == DeviceIdiom.Phone)
        {
            // Mobile-specific adjustments
            Resources["ContentFontSize"] = 14;
            Resources["ButtonPadding"] = new Thickness(10, 5);
        }
        else if (deviceInfo.Idiom == DeviceIdiom.Tablet)
        {
            // Tablet-specific adjustments
            Resources["ContentFontSize"] = 18;
            Resources["ButtonPadding"] = new Thickness(20, 10);
            
            // Enable two-column layout
            if (DeviceDisplay.Current.MainDisplayInfo.Orientation == DisplayOrientation.Landscape)
            {
                Resources["ColumnCount"] = 3; // Even more space in landscape
            }
        }
    }

    private void OnMainDisplayInfoChanged(object sender, DisplayInfoChangedEventArgs e)
    {
        // Re-adjust UI when orientation changes
        MainThread.BeginInvokeOnMainThread(AdjustUIForDevice);
    }
}

3. Resource Dictionary for Consistent Styling

xml

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <!-- Base styles -->
    <Style x:Key="HeaderStyle" TargetType="Label">
        <Setter Property="FontSize" Value="{OnIdiom Default=24, Tablet=32}"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
        <Setter Property="Margin" Value="{OnIdiom Default='0,10', Tablet='0,20'}"/>
    </Style>
    
    <Style x:Key="ContentButton" TargetType="Button">
        <Setter Property="Padding" Value="{DynamicResource ButtonPadding}"/>
        <Setter Property="FontSize" Value="{DynamicResource ContentFontSize}"/>
        <Setter Property="CornerRadius" Value="{OnIdiom Default=5, Tablet=10}"/>
    </Style>
    
    <!-- Default values that can be overridden -->
    <x:Double x:Key="ContentFontSize">16</x:Double>
    <Thickness x:Key="ButtonPadding">15,8</Thickness>
    <x:Int32 x:Key="ColumnCount">1</x:Int32>
</ResourceDictionary>

Key Responsive Patterns

1. Navigation Differences

Mobile:

• Bottom tab bar

• Hamburger menu for secondary navigation

• Stack navigation (push/pop)

Tablet:

• Sidebar navigation (always visible)

• Master-detail views

• Split-screen navigation

2. List/Detail Views

csharp

// In your page logic:
if (DeviceInfo.Current.Idiom == DeviceIdiom.Tablet && 
    DeviceDisplay.Current.MainDisplayInfo.Orientation == DisplayOrientation.Landscape)
{
    // Show list and detail side by side
    ShowSplitView();
}
else
{
    // Show list full screen, navigate to detail
    ShowMobileView();
}

3. Form Layouts

Mobile:

• Single column

• Full-width inputs

• Submit button fixed at bottom

Tablet:

• Multi-column forms

• Inline validation

• Submit button near relevant fields

Testing Considerations

1. Use the MAUI Device Simulator to test different screen sizes

2. Test orientation changes on physical devices when possible

3. Verify touch targets (minimum 48x48dp for mobile)

4. Check font scaling on large tablets

Performance Optimization

1. Load different XAML files for tablet/mobile when layouts differ significantly

2. Use compiled bindings (x:DataType) for better performance

3. Implement view recycling in long lists

4. Optimize images with multiple densities

By following these patterns, you can create a MAUI application that provides an optimal user experience across all mobile and tablet devices while sharing most of your codebase.