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

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

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