Styling

Shiny.Maui.TableView uses a cascading style system. Properties set on the TableView apply globally to all cells and sections. Section-level properties override global values. Cell-level properties override both.

TableView (global defaults)
  └─ TableSection (section overrides)
      └─ Cell (cell-level overrides)

When a property is null or -1 at any level, it falls through to the next level up. If no value is set anywhere, the platform default is used — which means dark mode works automatically without hardcoded colors.

Quick Example

<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">
    <tv:TableRoot>
        <tv:TableSection Title="Styled Section">
            <!-- This cell uses global styles from TableView -->
            <tv:LabelCell Title="Default Styled" ValueText="Inherits" />

            <!-- This cell overrides the title color -->
            <tv:LabelCell Title="Custom Color"
                          TitleColor="Red"
                          ValueText="Override" />
        </tv:TableSection>
    </tv:TableRoot>
</tv:TableView>

Global Cell Styles

Set these on the TableView to apply to all cells:

Title

Property	Type	Description
CellTitleColor	Color?	Title text color
CellTitleFontSize	double	Title font size
CellTitleFontFamily	string?	Title font family
CellTitleFontAttributes	FontAttributes?	Title styling (Bold, Italic, None)

Description

Property	Type	Description
CellDescriptionColor	Color?	Description text color
CellDescriptionFontSize	double	Description font size
CellDescriptionFontFamily	string?	Description font family
CellDescriptionFontAttributes	FontAttributes?	Description styling

Hint Text

Property	Type	Description
CellHintTextColor	Color?	Hint text color
CellHintTextFontSize	double	Hint font size
CellHintFontFamily	string?	Hint font family
CellHintFontAttributes	FontAttributes?	Hint styling

Value Text

Property	Type	Description
CellValueTextColor	Color?	Value text color (for LabelCell, CommandCell, etc.)
CellValueTextFontSize	double	Value font size
CellValueTextFontFamily	string?	Value font family
CellValueTextFontAttributes	FontAttributes?	Value styling

Background & Selection

Property	Type	Description
CellBackgroundColor	Color?	Cell background color
CellSelectedColor	Color?	Background color when tapped
CellAccentColor	Color?	Accent color for switches, checkboxes, and radios

Icon

Property	Type	Description
CellIconSize	double	Icon dimensions (width and height)
CellIconRadius	double	Icon corner radius (default: 6)

Padding & Border

Property	Type	Description
CellPadding	Thickness?	Cell content padding
CellBorderColor	Color?	Cell border color
CellBorderWidth	double	Cell border width
CellBorderRadius	double	Cell border corner radius

Global Header Styles

Property	Type	Default	Description
HeaderBackgroundColor	Color?	null	Header background
HeaderTextColor	Color?	null	Header text color
HeaderFontSize	double	—	Header font size
HeaderFontFamily	string?	null	Header font family
HeaderFontAttributes	FontAttributes	Bold	Header styling
HeaderPadding	Thickness	14,8,8,8	Header padding
HeaderHeight	double	—	Fixed header height
HeaderTextVerticalAlign	LayoutAlignment	End	Vertical alignment

Global Footer Styles

Property	Type	Default	Description
FooterTextColor	Color?	null	Footer text color
FooterFontSize	double	—	Footer font size
FooterFontFamily	string?	null	Footer font family
FooterFontAttributes	FontAttributes	—	Footer styling
FooterPadding	Thickness	14,8,8,8	Footer padding
FooterBackgroundColor	Color?	null	Footer background

Separator & Section Spacing

Property	Type	Default	Description
SeparatorColor	Color?	null	Line color between cells
SeparatorHeight	double	0.5	Separator thickness
SeparatorPadding	double	16	Separator left inset
ShowSectionSeparator	bool	true	Show gap between sections
SectionSeparatorHeight	double	8	Gap height between sections
SectionSeparatorColor	Color?	null	Gap color

Dark Mode

The style system supports dark mode automatically. When cell and section properties are left at their defaults (null), MAUI uses the system’s current theme colors.

To support dark mode properly:

• Do not hardcode colors on cells unless you need specific branding
• Use null (the default) to let the platform choose appropriate colors
• If you must set colors, use AppThemeBinding in XAML:

<tv:TableView CellTitleColor="{AppThemeBinding Light=#333333, Dark=#EEEEEE}"
              CellBackgroundColor="{AppThemeBinding Light=White, Dark=#1C1C1E}"
              HeaderBackgroundColor="{AppThemeBinding Light=#F2F2F7, Dark=#2C2C2E}">

Per-Cell Overrides

Any cell can override global styles by setting properties directly:

<tv:TableView CellTitleColor="Black" CellTitleFontSize="16">
    <tv:TableRoot>
        <tv:TableSection Title="Mixed Styles">
            <!-- Uses global: black title, 16pt -->
            <tv:LabelCell Title="Default" />

            <!-- Overrides: red title, 20pt bold -->
            <tv:LabelCell Title="Highlighted"
                          TitleColor="Red"
                          TitleFontSize="20"
                          TitleFontAttributes="Bold" />

            <!-- Overrides just color, inherits 16pt from global -->
            <tv:LabelCell Title="Subtle"
                          TitleColor="Gray" />
        </tv:TableSection>
    </tv:TableRoot>
</tv:TableView>

Borders

Add borders to individual cells or globally:

<!-- Global borders on all cells -->
<tv:TableView CellBorderColor="#E0E0E0"
              CellBorderWidth="1"
              CellBorderRadius="8">

<!-- Per-cell border override -->
<tv:CommandCell Title="Important Action"
                BorderColor="Red"
                BorderWidth="2"
                BorderRadius="12" />