Layouts and Controls in .NET MAUI

Intermediate 25 min read Lesson 4 of 8

Layout Types in MAUI

Layouts are containers that arrange child elements in a specific structure. MAUI provides several layout types for different scenarios.

1. StackLayout

// Vertical Stack

    

// Horizontal Stack

    

2. Grid


    
        
        
        
    
    
    
        
        
        
    
    
    

3. FlexLayout


    
    
    
    
    
    

4. AbsoluteLayout


    

5. RelativeLayout


    

Common Controls

Text Display Controls

// Label - Basic text display

Input Controls

// Entry - Single line text input


// Editor - Multi-line text input


// Password Entry


// SearchBar

Selection Controls

// CheckBox


// RadioButton




// Slider


// Switch


// Picker


// DatePicker


// TimePicker

Collection Controls

// ListView

    
        
            
        
    


// CollectionView (more flexible)

    
        
    
    
        
            
                
        
    

Complete Example

// MainPage.xaml


    
    
        
            
            
            
Key Takeaway
  • Layouts define how controls are arranged on the screen
  • Choose the right layout based on your needs
  • Controls provide various user interaction capabilities
  • Combine layouts and controls for complex UIs
Exercise

Create a registration form with:

  1. Grid or StackLayout structure
  2. Entry fields with validation
  3. Picker for selection
  4. CheckBox and RadioButton options
  5. Button with command binding
  6. Custom styling and colors
Test Your Knowledge - Take Quiz