Shiny.Maui.TableView — nugetz
aritchie/ Shiny.Maui.TableView v1.0.2 ✓ Verified .NET 10.0
Shiny TableViews - Bringing back the awesome TableView to .NET MAUI with more toys too
Get Started dotnet CLI PackageReference Package Manager
$ dotnet add package Shiny.Maui.TableViewReadme 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 maintainAny MAUI target — Works on iOS, Android, MacCatalyst, and any future MAUI target without platform-specific workDark mode support — Respects the system theme automatically; no hardcoded colorsFully styleable — Cascading style system from TableView → Section → Cell with per-cell overridesXAML-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" />
Property Type Default Description ValueTextstring""Text displayed on the right side ValueTextColorColor?nullValue text color ValueTextFontSizedouble-1Value font size (-1 = use global) ValueTextFontFamilystring?nullValue font family ValueTextFontAttributesFontAttributes?nullBold, Italic, or None
SwitchCell A cell with a toggle switch.
<tv:SwitchCell Title="Wi-Fi" On="{Binding WifiEnabled, Mode=TwoWay}" OnColor="#34C759" />
Property Type Default Description OnboolfalseSwitch state (two-way) OnColorColor?nullSwitch color when on
CheckboxCell A cell with a native checkbox control.
<tv:CheckboxCell Title="Accept Terms" Checked="{Binding Accepted, Mode=TwoWay}" />
Property Type Default Description CheckedboolfalseCheckbox state (two-way) AccentColorColor?nullCheckbox color
SimpleCheckCell A cell that shows/hides a checkmark on tap. Useful for selection lists.
<tv:SimpleCheckCell Title="Option A" Checked="{Binding OptionA, Mode=TwoWay}" />
Property Type Default Description CheckedboolfalseCheck state (two-way) Valueobject?nullAssociated value AccentColorColor?nullCheckmark color
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>
Property Type Default Description Valueobject?nullThe value this radio button represents AccentColorColor?nullRadio indicator color
CommandCell A tappable cell with a disclosure arrow that executes a command.
<tv:CommandCell Title="Privacy Policy"
ValueText="View"
Command="{Binding PrivacyCommand}"
KeepSelectedUntilBack="True" />
Property Type Default Description CommandICommand?nullCommand to execute on tap CommandParameterobject?nullParameter passed to command ShowArrowbooltrueShow disclosure arrow KeepSelectedUntilBackboolfalseKeep highlight until page reappears
Inherits all properties from LabelCell.
ButtonCell A full-width button-style cell.
<tv:ButtonCell Title="Sign Out" Command="{Binding SignOutCommand}" ButtonTextColor="Red" />
Property Type Default Description CommandICommand?nullCommand to execute CommandParameterobject?nullParameter passed to command ButtonTextColorColor?nullButton text color TitleAlignmentTextAlignmentCenterText alignment
EntryCell A cell with an inline text entry field.
<tv:EntryCell Title="Email"
ValueText="{Binding Email, Mode=TwoWay}"
Placeholder="user@example.com"
Keyboard="Email" />
Property Type Default Description ValueTextstring""Entry text (two-way) Placeholderstring""Placeholder text PlaceholderColorColor?nullPlaceholder color KeyboardKeyboardDefaultKeyboard type IsPasswordboolfalseMask input MaxLengthint-1Max characters (-1 = unlimited) TextAlignmentTextAlignmentEndText alignment CompletedCommandICommand?nullCommand on return key
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" />
Property Type Default Description DateDateTime?nullSelected date (two-way) InitialDateDateTime2000-01-01Date shown when no date is set MinimumDateDateTime1900-01-01Earliest selectable date MaximumDateDateTime2100-12-31Latest selectable date Formatstring"d"Date format string ValueTextColorColor?nullValue text color
TimePickerCell Tapping the cell opens the native time picker dialog.
<tv:TimePickerCell Title="Alarm"
Time="{Binding AlarmTime, Mode=TwoWay}"
Format="T" />
Property Type Default Description TimeTimeSpan00:00:00Selected time (two-way) Formatstring"t"Time format string ValueTextColorColor?nullValue text color
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" />
Property Type Default Description ItemsSourceIList?nullList of items SelectedIndexint-1Selected index (two-way) SelectedItemobject?nullSelected item (two-way) DisplayMemberstring?nullProperty name for display text PickerTitlestring?nullTitle shown on picker SelectedCommandICommand?nullCommand on selection ValueTextColorColor?nullValue text 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" />
Property Type Default Description Numberint?nullSelected number (two-way) Minint0Minimum value Maxint9999Maximum value Unitstring""Unit suffix (e.g., "pt", "px") PickerTitlestring"Enter a number"Dialog title SelectedCommandICommand?nullCommand on selection ValueTextColorColor?nullValue text color
PickerCell A full-page picker for single or multiple selection. Navigates to a selection page on tap.
<!-- Single selection -->
<tv:PickerCell Title="Country"
ItemsSource="{Binding Countries}"
SelectionMode="Single"
SelectedItem="{Binding SelectedCountry, Mode=TwoWay}"
PageTitle="Select Country" />
<!-- Multiple selection -->
<tv:PickerCell Title="Hobbies"
ItemsSource="{Binding Hobbies}"
SelectionMode="Multiple"
MaxSelectedNumber="3"
SelectedItems="{Binding SelectedHobbies, Mode=TwoWay}"
PageTitle="Select Hobbies" />
Property Type Default Description ItemsSourceIEnumerable?nullItems to pick from SelectedItemobject?nullSelected item (two-way, single mode) SelectedItemsIList?nullSelected items (two-way, multiple mode) SelectionModeSelectionModeSingleSingle or Multiple MaxSelectedNumberint0Max selections (0 = unlimited) UsePickToCloseboolfalseAuto-close when max reached UseAutoValueTextbooltrueAuto-generate display text DisplayMemberstring?nullProperty for display text SubDisplayMemberstring?nullProperty for subtitle PageTitlestring"Select"Picker page title ShowArrowbooltrueShow disclosure arrow KeepSelectedUntilBackboolfalseKeep highlight until return SelectedCommandICommand?nullCommand on selection AccentColorColor?nullCheckmark color on picker page
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>
Property Type Default Description CustomContentView?nullCustom view UseFullSizeboolfalseUse full cell width for content CommandICommand?nullCommand on tap LongCommandICommand?nullCommand on double-tap ShowArrowboolfalseShow disclosure arrow KeepSelectedUntilBackboolfalseKeep highlight until return
Common Cell Properties All cells inherit from CellBase and share these properties:
Property Type Default Description Titlestring""Primary text TitleColorColor?nullTitle color TitleFontSizedouble-1Title font size TitleFontFamilystring?nullTitle font family TitleFontAttributesFontAttributes?nullTitle styling Descriptionstring""Subtitle text below title DescriptionColorColor?nullDescription color DescriptionFontSizedouble-1Description font size HintTextstring""Hint text on the right of the title HintTextColorColor?nullHint color IconSourceImageSource?nullIcon on the left IconSizedouble-1Icon dimensions IconRadiusdouble-1Icon corner radius CellBackgroundColorColor?nullCell background SelectedColorColor?nullBackground when tapped IsSelectablebooltrueWhether the cell responds to taps IsEnabledbooltrueDisabled cells are dimmed CellHeightdouble-1Fixed cell height BorderColorColor?nullCell border color BorderWidthdouble-1Cell border width BorderRadiusdouble-1Cell border corner radius
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>
Property Type Default Description Titlestring""Header text FooterTextstring""Footer text HeaderViewView?nullCustom header view (overrides Title) FooterViewView?nullCustom footer view (overrides FooterText) IsVisiblebooltrueShow/hide entire section FooterVisiblebooltrueShow/hide footer HeaderBackgroundColorColor?nullHeader background HeaderTextColorColor?nullHeader text color HeaderFontSizedouble-1Header font size HeaderFontFamilystring?nullHeader font family HeaderFontAttributesFontAttributes?nullHeader styling HeaderHeightdouble-1Fixed header height FooterTextColorColor?nullFooter text color FooterFontSizedouble-1Footer font size FooterBackgroundColorColor?nullFooter background UseDragSortboolfalseEnable reorder controls
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>
Property Type Default Description ItemsSourceIEnumerable?nullData source for generated cells ItemTemplateDataTemplate?nullTemplate for each item TemplateStartIndexint0Insert position among static cells
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):
Property Type Description CellTitleColorColor?Title text color CellTitleFontSizedoubleTitle font size CellTitleFontFamilystring?Title font family CellTitleFontAttributesFontAttributes?Title styling CellDescriptionColorColor?Description text color CellDescriptionFontSizedoubleDescription font size CellDescriptionFontFamilystring?Description font family CellDescriptionFontAttributesFontAttributes?Description styling CellHintTextColorColor?Hint text color CellHintTextFontSizedoubleHint font size CellValueTextColorColor?Value text color CellValueTextFontSizedoubleValue font size CellValueTextFontFamilystring?Value font family CellValueTextFontAttributesFontAttributes?Value styling CellBackgroundColorColor?Cell background CellSelectedColorColor?Background on tap CellAccentColorColor?Accent for switches, checkboxes, radios CellIconSizedoubleIcon dimensions CellIconRadiusdoubleIcon corner radius CellPaddingThickness?Cell content padding CellBorderColorColor?Cell border color CellBorderWidthdoubleCell border width CellBorderRadiusdoubleCell border corner radius
Property Type Description HeaderBackgroundColorColor?Header background HeaderTextColorColor?Header text color HeaderFontSizedoubleHeader font size HeaderFontFamilystring?Header font family HeaderFontAttributesFontAttributesHeader styling (default: Bold) HeaderPaddingThicknessHeader padding HeaderHeightdoubleFixed header height HeaderTextVerticalAlignLayoutAlignmentVertical alignment (default: End) FooterTextColorColor?Footer text color FooterFontSizedoubleFooter font size FooterFontFamilystring?Footer font family FooterFontAttributesFontAttributesFooter styling FooterPaddingThicknessFooter padding FooterBackgroundColorColor?Footer background
Separator/Section styles :
Property Type Default Description SeparatorColorColor?nullCell separator color SeparatorHeightdouble0.5Separator thickness SeparatorPaddingdouble16Separator left inset ShowSectionSeparatorbooltrueShow gap between sections SectionSeparatorHeightdouble8Gap height between sections SectionSeparatorColorColor?nullGap color
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 <!-- Trigger scroll from view model -->
<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