Shiny.Maui.TableView 1.0.1

Shiny.Maui.TableView

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

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 without platform-specific work
• 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.

Setup

Install the NuGet package and call UseShinyTableView() in your MauiProgram.cs:

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .UseShinyTableView();

Add the XML namespace to your XAML 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>

Cell Types

LabelCell

Displays a title with an optional value text on the right.

<tv:LabelCell Title="Version" ValueText="1.0.0" Description="Latest stable release" />

SwitchCell

A cell with a toggle switch.

<tv:SwitchCell Title="Wi-Fi" On="{Binding WifiEnabled, Mode=TwoWay}" OnColor="#34C759" />

CheckboxCell

A cell with a native checkbox control.

<tv:CheckboxCell Title="Accept Terms" Checked="{Binding Accepted, Mode=TwoWay}" />

SimpleCheckCell

A cell that shows/hides a checkmark on tap. Useful for selection lists.

<tv:SimpleCheckCell Title="Option A" Checked="{Binding OptionA, Mode=TwoWay}" />

RadioCell

Radio button selection within a section. Use the RadioCell.SelectedValue attached property on the parent TableSection to bind the selected value.

<tv:TableSection Title="Theme" tv:RadioCell.SelectedValue="{Binding SelectedTheme, Mode=TwoWay}">
    <tv:RadioCell Title="Light" Value="Light" />
    <tv:RadioCell Title="Dark" Value="Dark" />
    <tv:RadioCell Title="System" Value="System" />
</tv:TableSection>

CommandCell

A tappable cell with a disclosure arrow that executes a command.

<tv:CommandCell Title="Privacy Policy"
                 ValueText="View"
                 Command="{Binding PrivacyCommand}"
                 KeepSelectedUntilBack="True" />

Inherits all properties from LabelCell.

ButtonCell

A full-width button-style cell.

<tv:ButtonCell Title="Sign Out" Command="{Binding SignOutCommand}" ButtonTextColor="Red" />

EntryCell

A cell with an inline text entry field.

<tv:EntryCell Title="Email"
               ValueText="{Binding Email, Mode=TwoWay}"
               Placeholder="user@example.com"
               Keyboard="Email" />

DatePickerCell

Tapping the cell opens the native date picker dialog.

<tv:DatePickerCell Title="Birthday"
                    Date="{Binding BirthDate, Mode=TwoWay}"
                    Format="D"
                    MinimumDate="1900-01-01"
                    MaximumDate="2025-12-31" />

TimePickerCell

Tapping the cell opens the native time picker dialog.

<tv:TimePickerCell Title="Alarm"
                    Time="{Binding AlarmTime, Mode=TwoWay}"
                    Format="T" />

TextPickerCell

Tapping the cell opens a native dropdown/spinner picker.

<tv:TextPickerCell Title="Color"
                    ItemsSource="{Binding Colors}"
                    SelectedIndex="{Binding SelectedColorIndex, Mode=TwoWay}"
                    PickerTitle="Choose a color" />

NumberPickerCell

Tapping the cell opens a prompt dialog for numeric input.

<tv:NumberPickerCell Title="Font Size"
                      Number="{Binding FontSize, Mode=TwoWay}"
                      Min="8" Max="72" Unit="pt" />

PickerCell

A full-page picker for single or multiple selection. Navigates to a selection page on tap.

<tv:PickerCell Title="Country"
                ItemsSource="{Binding Countries}"
                SelectionMode="Single"
                SelectedItem="{Binding SelectedCountry, Mode=TwoWay}"
                PageTitle="Select Country" />


<tv:PickerCell Title="Hobbies"
                ItemsSource="{Binding Hobbies}"
                SelectionMode="Multiple"
                MaxSelectedNumber="3"
                SelectedItems="{Binding SelectedHobbies, Mode=TwoWay}"
                PageTitle="Select Hobbies" />

CustomCell

A cell that hosts any custom MAUI view.

<tv:CustomCell Title="Custom Content">
    <tv:CustomCell.CustomContent>
        <ProgressBar Progress="0.75" />
    </tv:CustomCell.CustomContent>
</tv:CustomCell>

Common Cell Properties

All cells inherit from CellBase and share these properties:

Sections

TableSection

Groups cells with an optional header and footer.

<tv:TableSection Title="GENERAL"
                  FooterText="These settings apply globally">
    <tv:LabelCell Title="Item 1" />
    <tv:LabelCell Title="Item 2" />
</tv:TableSection>

Dynamic Cells with ItemTemplate

Sections can generate cells from a data source:

<tv:TableSection Title="Items"
                  ItemsSource="{Binding Items}">
    <tv:TableSection.ItemTemplate>
        <DataTemplate>
            <tv:LabelCell Title="{Binding Name}" ValueText="{Binding Value}" />
        </DataTemplate>
    </tv:TableSection.ItemTemplate>
</tv:TableSection>

Global Styling

Apply styles to all cells from the TableView level. Individual cell properties override global values.

<tv:TableView CellTitleColor="#333333"
              CellTitleFontSize="17"
              CellDescriptionColor="#888888"
              CellValueTextColor="#007AFF"
              CellBackgroundColor="White"
              CellSelectedColor="#EFEFEF"
              CellAccentColor="#007AFF"
              CellIconSize="28"
              HeaderTextColor="#666666"
              HeaderFontSize="13"
              HeaderBackgroundColor="#F2F2F7"
              FooterTextColor="#8E8E93"
              SeparatorColor="#C6C6C8">

TableView Styling Properties

Cell styles (cascade to all cells):

Header/Footer styles:

Separator/Section styles:

Drag & Sort

Enable reorder controls on a section. Each cell gets up/down arrows to move it within the section.

<tv:TableView ItemDroppedCommand="{Binding ItemDroppedCommand}">
    <tv:TableRoot>
        <tv:TableSection Title="Drag to Reorder" UseDragSort="True">
            <tv:LabelCell Title="First" ValueText="1" />
            <tv:LabelCell Title="Second" ValueText="2" />
            <tv:LabelCell Title="Third" ValueText="3" />
        </tv:TableSection>
    </tv:TableRoot>
</tv:TableView>

The ItemDroppedCommand receives an ItemDroppedEventArgs with Section, Cell, FromIndex, and ToIndex.

Scroll Control

<tv:TableView ScrollToTop="{Binding ShouldScrollTop}" ScrollToBottom="{Binding ShouldScrollBottom}" />

// Or from code
await tableView.ScrollToTopAsync();
await tableView.ScrollToBottomAsync();

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 (UITableView on iOS, RecyclerView on Android).

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.

License

MIT