TableView | Getting Started

A settings-style TableView for .NET MAUI, inspired by AiForms.Maui.SettingsView by Kaoru Nakamura (muak).

• GitHub Repository
• 

How It’s Different

AiForms.SettingsView uses native platform controls under the hood (UITableView on iOS, RecyclerView on Android) with custom MAUI handlers. This gives great native fidelity but ties the implementation to platform-specific code.

Shiny.Maui.TableView takes a pure .NET MAUI approach. The entire control is built from standard MAUI layouts and views with zero platform-specific code. This means:

• Single codebase — No custom handlers, renderers, or platform projects to maintain
• Any MAUI target — Works on iOS, Android, MacCatalyst, and any future MAUI target
• Dark mode support — Respects the system theme automatically; no hardcoded colors
• Fully styleable — Cascading style system from TableView → Section → Cell with per-cell overrides
• XAML-first — All properties are BindableProperty with full MVVM/binding support

The trade-off is that you get MAUI’s rendering rather than native list controls, but for settings screens with dozens (not thousands) of items, this is the right trade-off.

Features

• 14 built-in cell types for common settings patterns
• Cascading style system (TableView → Section → Cell)
• Full MVVM support with BindableProperty on everything
• Dynamic sections and cells via ItemsSource / ItemTemplate
• Drag & sort reordering within sections
• Programmatic scroll control
• Section headers and footers (text or custom views)
• Cell icons, hints, descriptions, and borders
• Selection highlighting with customizable colors

Setup

1. Install the NuGet package

   dotnet add package Shiny.Maui.TableView

2. Register in your MauiProgram.cs

   using Shiny.Maui.TableView;
   
   var builder = MauiApp.CreateBuilder();
   builder
       .UseMauiApp<App>()
       .UseShinyTableView();

3. Add the XAML namespace to your pages

   xmlns:tv="http://shiny.net/maui/tableview"

Quick Start

<tv:TableView>
    <tv:TableRoot>
        <tv:TableSection Title="Account">
            <tv:SwitchCell Title="Notifications"
                           On="{Binding NotificationsOn, Mode=TwoWay}" />
            <tv:EntryCell Title="Username"
                          ValueText="{Binding Username, Mode=TwoWay}"
                          Placeholder="Enter name" />
            <tv:CommandCell Title="About"
                            Command="{Binding AboutCommand}"
                            ShowArrow="True" />
        </tv:TableSection>
    </tv:TableRoot>
</tv:TableView>

Control Hierarchy

The TableView is structured as a simple tree:

tv:TableView          ← ScrollView + global styles
  └─ tv:TableRoot     ← Container for sections
      └─ tv:TableSection   ← Groups cells with header/footer
          └─ tv:[CellType]  ← Individual cells (14 types)

Next Steps

• Cell Types — All 14 cell types with properties and examples
• Sections — Section configuration and dynamic content
• Styling — Cascading style system and global properties
• Advanced — Drag & sort, scroll control, and events

Acknowledgments

This project was inspired by AiForms.Maui.SettingsView by Kaoru Nakamura (muak), licensed under MIT. AiForms.SettingsView pioneered the rich settings TableView pattern for Xamarin.Forms and .NET MAUI using native platform renderers.

Shiny.Maui.TableView reimagines that feature set as a pure .NET MAUI implementation — no platform-specific code, no custom handlers — making it simpler to maintain and extend while supporting the same cell types and styling capabilities.