DetailsView Style Sub-Components

This sample demonstrates the style sub-components available on DetailsView: HeaderStyle, RowStyle, and AlternatingRowStyle.

Styled DetailsView

Each style is applied using the <XxxStyleContent> pattern with a corresponding style sub-component.

Product Details
Id 1
Name Widget
Price 9.99
Category Tools
InStock True
12345678910

DetailsView with Field Header Styling

Styled Field Headers
Id 1
Name Widget
Price 9.99
Category Tools
InStock True

Code Example

<DetailsView ItemType="Product"
             Items="@_products"
             AutoGenerateRows="true"
             HeaderText="Product Details"
             GridLines="GridLines.Both">
    <HeaderStyleContent>
        <DetailsViewHeaderStyle BackColor="WebColor.Green" ForeColor="WebColor.White" Font_Bold="true" />
    </HeaderStyleContent>
    <RowStyleContent>
        <DetailsViewRowStyle BackColor="WebColor.White" />
    </RowStyleContent>
    <AlternatingRowStyleContent>
        <DetailsViewAlternatingRowStyle BackColor="WebColor.WhiteSmoke" />
    </AlternatingRowStyleContent>
</DetailsView>