shiny-tableview

name	shiny-tableview
description	Generate settings-style TableView pages and cells for .NET MAUI using Shiny.Maui.TableView - a pure MAUI implementation with cascading styles, 14 cell types, sections, drag-sort, and full MVVM support
auto_invoke	true
triggers	["tableview","table view","settings page","settings view","settingsview"]

Shiny.Maui.TableView Skill

You are an expert in Shiny.Maui.TableView, a pure .NET MAUI settings-style TableView control with 14 cell types, cascading styles, sections, drag-sort reordering, and full MVVM/binding support.

When to Use This Skill

Invoke this skill when the user wants to:

• Create a settings page or preferences UI in .NET MAUI
• Add or configure TableView cells (switch, checkbox, entry, picker, command, etc.)
• Style a TableView with global cascading styles or per-cell overrides
• Use sections with headers, footers, and dynamic ItemTemplate cells
• Enable drag-to-reorder within a section
• Bind cell properties to a ViewModel using MVVM
• Create radio button groups, date/time pickers, number pickers, or multi-select pickers
• Build any form-like or list-based settings UI

Library Overview

Repository: https://github.com/shinyorg/tableview Namespace: Shiny.Maui.TableView XAML Namespace: http://shiny.net/maui/tableview (prefix: tv)

Shiny.Maui.TableView is a pure .NET MAUI implementation inspired by AiForms.Maui.SettingsView. Unlike AiForms which uses native platform renderers (UITableView on iOS, RecyclerView on Android), this library uses only standard MAUI layouts and views with zero platform-specific code.

Setup

1. Install NuGet Package

dotnet add package Shiny.Maui.TableView

2. Configure in MauiProgram.cs

using Shiny.Maui.TableView;

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

3. Add XAML Namespace

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

Architecture

The control hierarchy is:

tv:TableView (ContentView > ScrollView > VerticalStackLayout)
  tv:TableRoot
    tv:TableSection (Title, FooterText, cells)
      tv:LabelCell / tv:SwitchCell / tv:CommandCell / etc.

Style cascade: TableView globals -> Section overrides -> Cell overrides. All properties are BindableProperty with full MVVM support.

Cell Types (14 Total)

LabelCell

Displays title with optional value text on the right.

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

Property	Type	Default	Description
ValueText	string	""	Right-side text
ValueTextColor	Color?	null	Value color
ValueTextFontSize	double	-1	Value font size
ValueTextFontFamily	string?	null	Value font family
ValueTextFontAttributes	FontAttributes?	null	Value styling

SwitchCell

Toggle switch.

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

Property	Type	Default
On	bool	false
OnColor	Color?	null

CheckboxCell

Native checkbox control.

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

Property	Type	Default
Checked	bool	false
AccentColor	Color?	null

SimpleCheckCell

Checkmark toggle (no native checkbox, just a checkmark character).

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

Property	Type	Default
Checked	bool	false
Value	object?	null
AccentColor	Color?	null

RadioCell

Radio button selection. Use RadioCell.SelectedValue attached property on the section.

<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>

Property	Type	Default
Value	object?	null
AccentColor	Color?	null

CommandCell

Tappable cell with disclosure arrow. Inherits from LabelCell.

<tv:CommandCell Title="About" ValueText="Learn more"
                 Command="{Binding AboutCommand}"
                 KeepSelectedUntilBack="True" />

Property	Type	Default
Command	ICommand?	null
CommandParameter	object?	null
ShowArrow	bool	true
KeepSelectedUntilBack	bool	false

ButtonCell

Full-width button-style cell.

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

Property	Type	Default
Command	ICommand?	null
CommandParameter	object?	null
ButtonTextColor	Color?	null
TitleAlignment	TextAlignment	Center

EntryCell

Inline text input.

<tv:EntryCell Title="Email" ValueText="{Binding Email, Mode=TwoWay}"
               Placeholder="[e-mail]" Keyboard="Email" />

Property	Type	Default
ValueText	string	""
Placeholder	string	""
PlaceholderColor	Color?	null
Keyboard	Keyboard	Default
IsPassword	bool	false
MaxLength	int	-1
TextAlignment	TextAlignment	End
CompletedCommand	ICommand?	null
ValueTextColor	Color?	null

DatePickerCell

Opens native date picker dialog on tap.

<tv:DatePickerCell Title="Birthday" Date="{Binding BirthDate, Mode=TwoWay}" Format="D" />

Property	Type	Default
Date	DateTime?	null
InitialDate	DateTime	2000-01-01
MinimumDate	DateTime	1900-01-01
MaximumDate	DateTime	2100-12-31
Format	string	"d"
ValueTextColor	Color?	null

TimePickerCell

Opens native time picker dialog on tap.

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

Property	Type	Default
Time	TimeSpan	00:00:00
Format	string	"t"
ValueTextColor	Color?	null

TextPickerCell

Opens native dropdown/spinner picker on tap.

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

Property	Type	Default
ItemsSource	IList?	null
SelectedIndex	int	-1
SelectedItem	object?	null
DisplayMember	string?	null
PickerTitle	string?	null
SelectedCommand	ICommand?	null
ValueTextColor	Color?	null

NumberPickerCell

Opens a prompt dialog for numeric input.

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

Property	Type	Default
Number	int?	null
Min	int	0
Max	int	9999
Unit	string	""
PickerTitle	string	"Enter a number"
SelectedCommand	ICommand?	null
ValueTextColor	Color?	null

PickerCell

Full-page picker for single or multi-select. Navigates to a selection page.

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

<!-- Multi select -->
<tv:PickerCell Title="Hobbies" ItemsSource="{Binding Hobbies}"
                SelectionMode="Multiple" MaxSelectedNumber="3"
                SelectedItems="{Binding SelectedHobbies, Mode=TwoWay}" />

Property	Type	Default
ItemsSource	IEnumerable?	null
SelectedItem	object?	null
SelectedItems	IList?	null
SelectionMode	SelectionMode	Single
MaxSelectedNumber	int	0 (unlimited)
UsePickToClose	bool	false
UseAutoValueText	bool	true
DisplayMember	string?	null
SubDisplayMember	string?	null
PageTitle	string	"Select"
ShowArrow	bool	true
KeepSelectedUntilBack	bool	false
SelectedCommand	ICommand?	null
AccentColor	Color?	null

CustomCell

Hosts any custom MAUI view.

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

Property	Type	Default
CustomContent	View?	null