Add row background style selector feature.

Author: didiyordanova

controls/datagrid/images/datagrid-rowbackground-style-selector.png

@@ -11,61 +11,107 @@ slug: datagrid-style-selectors
 
 The [.NET MAUI DataGrid]({%slug datagrid-overview%}) component exposes a conditional styling feature. It allows users to apply different styles on a cell or per group header depending on a specific condition.
 
-You can set a different style on a specific cell from a specific column based on custom selection logic with the following properties:
+## Cell Style Selector
+
+You can set a different style on a specific cell from a specific column based on custom style-selection logic with the following properties:
 
 * `CellContentStyleSelector`(`IStyleSelector`)—Styles the content of the cell by using the text alignment options (`TextMargin`, `HorizontalTextAlignment`, `VerticalTextAlignment`), the font options (`FontAttributes`, `FontFamily`, `FontSize`) and the `TextColor` property.
 * `CellDecorationStyleSelector`(`IStyleSelector`)—Styles the decoration of a cell.
 
-Different styles can be applied on a per-group header once the DataGrid control is grouped through `GroupHeaderStyleSelector` property.
+> For the DataGrid Style Selector example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Styling** category.
+
+## Row Background Style Selector
+
+You can set a different style on a row, alternate row and on row details based on custom style-selection logic by using the `RowBackgroundStyleSelector` (`IStyleSelector`) property.
+
+> For the DataGrid Row Background Style Selector example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Styling** category.
 
-Different styles can be applied on a per-group footer once the DataGrid control is grouped through `GroupFooterStyleSelector` property.
+## Group Style Selector
+
+You can set a different style on a group header and footer based on custom style-selection logic with the following properties:
+
+* `GroupHeaderStyleSelector`(`IStyleSelector`)—Different styles can be applied on a per-group header once the DataGrid control is grouped
+* `GroupFooterStyleSelector`(`IStyleSelector`)—Different styles can be applied on a per-group footer once the DataGrid control is grouped
 
 > To display the group footer, set the `ShowGroupFooters` property to `True`.
 
-The `CellContentStyleSelector`, `CellDecorationStyleSelector`, and `GroupStyleSelector` use the `SelectStyle` method to change the style.
+> For the DataGrid Style Selector example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Styling** category.
 
-## Example
+The `CellContentStyleSelector`, `CellDecorationStyleSelector`, `RowBackgroundStyleSelector`, `GroupHeaderStyleSelectorand`, and `GroupFooterStyleSelector` use the `SelectStyle` method to change the style.
 
-The following example will demonstrate how to apply the style selectors in the DataGrid control:
+## Example with Cell and Group Style Selectors
 
-Let’s add the DataGrid and set the `CellContentStyleSelector` as a static resource of type `MyCellContentStyleSelector`, `CellDecorationStyleSelector` as a static resource of type `MyCellDecorationStyleSelector`, and `GroupStyleSelector` as a static resource of type `MyGroupStyleSelector`.
+The following example will demonstrate how to apply the style selectors on the DataGrid cell and group header:
 
-**1.** `DataGrid` definition in XAML:
+Let’s add the DataGrid and set the `CellContentStyleSelector` property as a static resource of type `MyCellContentStyleSelector`, `CellDecorationStyleSelector` as a static resource of type `MyCellDecorationStyleSelector`, and `GroupStyleSelector` as a static resource of type `MyGroupStyleSelector`.
+
+**1.** Define the `RadDataGrid` in XAML:
 
 <snippet id='datagrid-styleselector-example'/>
 
-**2.** Create a simple data for the DataGrid:
+**2.** Create a sample data model:
 
 <snippet id='datagrid-styleselector-data'/>
 
-**3.** Set the `ItemsSource` of the `DataGrid` class:
+**3.** Set the `ItemsSource` of the `RadDataGrid`:
 
 <snippet id='datagrid-styleselector-items'/>
 
+**4.** Create a custom class for each selector. Each class derives from `IStyleSelector` and overrides its `SelectStyle` method.
+
+* The implementation of `MyCellContentSelector` class:
 
-**4.** Add `MyCellContentStyleSelector`, `MyCellDecorationStyleSelector`, and `MyGroupStyleSelector` as resources in the **Resource** page of the application:
+<snippet id='datagrid-styleselector-cellcontent'/>
+
+* The implementation of `MyCellDecorationSelector` class:
+
+<snippet id='datagrid-styleselector-celldecoration'/>
+
+* The implementation of `MyGroupSelector` class:
+
+<snippet id='datagrid-styleselector-group'/>
+
+**5.** Add `MyCellContentSelector`, `MyCellDecorationSelector`, and `MyGroupSelector` as resources in the **Resource** page of the application:
 
 <snippet id='datagrid-styleselectors'/>
 
-**5.** Create a custom class for each selector. This class derives from `DataGridStyleSelector` and overrides its `SelectStyle` method.
+This is how the DataGrid control will look when `CellContentStyleSelector` is applied.
 
-The `MyCellContentStyleSelector` class implementation is as follows:
+![.NET MAUI DataGrid Cell and Group Header Style Selectors](../images/datagrid-style-selector.png)
 
-<snippet id='datagrid-styleselector-cellcontent'/>
+> For the DataGrid Style Selector example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Styling** category.
 
-The implementation of the `MyCellDecorationStyleSelector` class is shown below:
+## Example with Row Background Style Selectors
 
-<snippet id='datagrid-styleselector-celldecoration'/>
+The following example will demonstrate how to apply the style selectors on the DataGrid rows, row details and alternate rows:
 
+Let’s add the DataGrid and set the `RowBackgroundStyleSelector` property as a static resource of type `MyRowBackgroundStyleSelector`.
 
-You can implement `MyGroupStyleSelector` as follows:
+**1.** Define the `RadDataGrid` in XAML:
 
-<snippet id='datagrid-styleselector-group'/>
+<snippet id='datagrid-rowbackground-styleselector-example'/>
 
+**2.** Create a sample data model:
 
-This is how the DataGrid control will look when `CellContentStyleSelector` is applied.
+<snippet id='datagrid-rowbackground-styleselector-model'/>
+
+**3.** Define the `ViewModel`:
+
+<snippet id='datagrid-rowbackground-styleselector-viewmodel'/>
+
+**4.** Create a custom class `MyRowBackgroundStyleSelector` that derives from `IStyleSelector` and override the `SelectStyle` method.
+
+<snippet id='datagrid-rowbackground-styleselector-class'/>
+
+**5.** Add `MyRowBackgroundStyleSelector` as resource in the **Resource** page of the application:
+
+<snippet id='datagrid-rowbackground-styleselector'/>
+
+This is how the DataGrid control looks when applying the `RowBackgroundStyleSelector`.
+
+![.NET MAUI DataGrid Row Background Style Selector](../images/datagrid-rowbackground-style-selector.png)
 
-![DataGrid StyleSelectors](../images/datagrid-style-selector.png)
+> For the DataGrid Row Background Style Selector example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Styling** category.
 
 ## See Also
 

controls/datagrid/theming-and-styles/style-selectors.md

@@ -35,7 +35,7 @@ The next image shows the end result.
 You can style the rows and cells of the DataGrid with the following properties:
 
 * `RowBackgroundStyle`(of type `Style` with target type `DataGridRowBackgroundAppearance`)—Defines the style of each row.
-* `AlternateRowBackgroundStyle`(of type `Style` with target type `DataGridAlternateRowBackgroundAppearance`)—Defines the appearance style of an alternated row.
+* `AlternateRowBackgroundStyle`(of type `Style` with target type `DataGridRowBackgroundAppearance`)—Defines the appearance style of an alternated row.
 * `SelectionStyle`(of type `Style` with target type `DataGridSelectionAppearance`)—Defines the appearance settings applied to the selected DataGrid row.
 * `CurrentCellStyle`(of type `Style` with target type `DataGridCurrentCellAppearance`)—Defines the style applied to the current cell.
 * (Desktop-only)`MouseHoverStyle`(of type `Style` with target type `DataGridMouseHoverAppearance`)—Specifies the style applied to the cells and rows when the mouse is over them.