Styling Elements

Glossary Item Box

The following page provides a list of examples that demonstrate how to style various elements. For more styling-related information, refer to the Styles topic.

All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.

ShowStyling data cells

The following example demonstrates how to change the foreground and background of the current cell.

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>

    <Style TargetType="{x:Type xcdg:DataCell}">
      <Setter Property="CurrentForeground">
        <Setter.Value>
          <SolidColorBrush Color="Yellow"/>
        </Setter.Value>
        </Setter>
          <Setter Property="CurrentBackground">
            <Setter.Value>
          <SolidColorBrush Color="Orange"/>
        </Setter.Value>
      </Setter>
    </Style>

    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
   </Grid.Resources>

   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

ShowAlternating data-row styles

The following example demonstrates how to alternate the appearance of data row styles using the IndexToOddConverter.

XAML Copy Code
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>

    <xcdg:IndexToOddConverter x:Key="rowIndexConverter"/>   

    <Style TargetType="{x:Type xcdg:DataRow}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
                                       Path=(xcdg:DataGridVirtualizingPanel.ItemIndex),
                                       Converter={StaticResource rowIndexConverter}}"
                               Value="True">
          <Setter Property="Background">
            <Setter.Value>
              <SolidColorBrush Color="LightGray"
                               Opacity="0.1"/>
            </Setter.Value>
          </Setter>
        </DataTrigger>
      </Style.Triggers>
    </Style>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                   Source="{Binding Source={x:Static Application.Current},
                                                    Path=Orders}"/>
  </Grid.Resources>

  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
  </xcdg:DataGridControl>
</Grid>

As of version 3.1, it is also possible to enable alternate row styles, by setting the IsAlternatingRowStyleEnabled property, which is defined in the TableView class, to true. 

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
     <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                        Source="{Binding Source={x:Static Application.Current}, Path=Orders}" />

    <Style TargetType="{x:Type xcdg:TableView}">
       <Setter Property="IsAlternatingRowStyleEnabled"
               Value="True" />
    </Style>

  </Grid.Resources>


  <xcdg:DataGridControl ItemsSource="{Binding Source={StaticResource cvs_orders}}"
                        AutoCreateDetailConfigurations="True">
     <xcdg:DataGridControl.DefaultDetailConfiguration>

       <xcdg:DefaultDetailConfiguration xcdg:TableView.IsAlternatingRowStyleEnabled="False"/>

     </xcdg:DataGridControl.DefaultDetailConfiguration>
  </xcdg:DataGridControl>
</Grid>

ShowStyling a fixed-column splitter

The following example demonstrates how to change the style of the data rows' fixed-column splitter.

XAML Copy Code
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
     
     <Style x:Key="basicSplitter_style" TargetType="{x:Type xcdg:FixedColumnSplitter}">
       <Setter Property="Background" Value="LightBlue"/>                              
     </Style>           
                                                                   
     <Style TargetType="{x:Type xcdg:DataRow}">
       <Setter Property="xcdg:TableView.FixedColumnSplitterStyle"
               Value="{StaticResource basicSplitter_style}"/>
     </Style>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
    <xcdg:DataGridControl.Columns>
      <xcdg:Column FieldName="ShipCountry" VisiblePosition="0"/>
      <xcdg:Column FieldName="ShipCity" VisiblePosition="1"/>
    </xcdg:DataGridControl.Columns>
    <xcdg:DataGridControl.View >       
      <xcdg:TableView FixedColumnCount="2"/>       
    </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>

ShowChanging the background color of a data row

The following example demonstrates how to changed the background color of a DataRow according to the value of one of its cells using DataTriggers.

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                                        Path=Orders}"/>

   <Style TargetType="{x:Type xcdg:DataRow}">
     <Style.Triggers>
       <DataTrigger Binding="{Binding Path=[EmployeeID]}" Value="1">
         <Setter Property="Background" Value="Pink"/>
       </DataTrigger>
       <DataTrigger Binding="{Binding Path=[EmployeeID]}" Value="3">
         <Setter Property="Background" Value="Blue"/>
       </DataTrigger>
     </Style.Triggers>
   </Style>
 </Grid.Resources>

<xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

ShowForcing items in the fixed headers to occupy all the available width

The following example demonstrates how to force the GroupByControl and ColumnManagerRow contained in a grid's fixed header section to occupy all the available width.

By default, items in the fixed header and footer sections will only span across the width occupied by the columns.

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                       Path=Orders}"
                                       AutoCreateItemProperties="False">
      <xcdg:DataGridCollectionViewSource.ItemProperties>
        <xcdg:DataGridItemProperty Name="ShipCountry"/>
        <xcdg:DataGridItemProperty Name="ShipCity"/>
        </xcdg:DataGridCollectionViewSource.ItemProperties>
      </xcdg:DataGridCollectionViewSource>

     <Style TargetType="{x:Type xcdg:GroupHeaderControl}">
       <Setter Property="MinWidth"
               Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}},
                               Path=ActualWidth}"/>
     </Style>
     <Style TargetType="{x:Type xcdg:ColumnManagerRow}">
       <Setter Property="MinWidth"
               Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}},
                               Path=ActualWidth}"/>
     </Style>

    </Grid.Resources>

    <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

ShowStyling row selectors

The following example demonstrates how to display a row's visual index in its corresponding row selector by creating a style targeting the RowSelector type that displays the value of its ItemIndex property as its content. The style is then assigned to the RowSelector.RowSelectorStyle attached property, which is set by the implicit DataRow style.

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                                        Path=Orders}" />

    <Style x:Key="itemIndexSelectorStyle"
           TargetType="{x:Type xcdg:RowSelector}">
      <Setter Property="Content"
              Value="{Binding RelativeSource={RelativeSource Self}, Path=ItemIndex}"/>
    </Style>
    <Style TargetType="{x:Type xcdg:DataRow}">
      <Setter Property="xcdg:RowSelector.RowSelectorStyle"
              Value="{StaticResource itemIndexSelectorStyle}" />
    </Style>

  </Grid.Resources>

  <xcdg:DataGridControl x:Name="OrdersGrid"
                            ItemsSource="{Binding Source={StaticResource cvs_orders}}" />
</Grid>

ShowProviding a detail configuration item-container style

The following example demonstrates how to provide an item-container style for the Employee_Orders data relation.

XAML Copy Code
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
      xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_employees"
                                    Source="{Binding Source={x:Static Application.Current},
                                              Path=Employees}"/>           
   
    <xcdg:IndexToOddConverter x:Key="rowIndexConverter" />
   
    <Style x:Key="alternatingDataRowStyle" TargetType="{x:Type xcdg:DataRow}">
      <Style.Triggers>
         <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
                                 Path=(xcdg:DataGridVirtualizingPanel.ItemIndex),
                                 Converter={StaticResource rowIndexConverter}}"
                      Value="True">
            <Setter Property="Background" Value="AliceBlue"/>                    
         </DataTrigger>
      </Style.Triggers>
    </Style>
  </Grid.Resources>
 
  <xcdg:DataGridControl x:Name="EmployeesGrid"
                  ItemsSource="{Binding Source={StaticResource cvs_employees}}"
                  AutoCreateDetailConfigurations="True">   
    <xcdg:DataGridControl.DetailConfigurations>
      <xcdg:DetailConfiguration RelationName="Employee_Orders"
                                Title="Employee Orders"
                                ItemContainerStyle="{StaticResource alternatingDataRowStyle}"/>                        
    </xcdg:DataGridControl.DetailConfigurations>      
  </xcdg:DataGridControl>
</Grid> 

ShowChanging the no-group content

The following example demonstrates how to provide an implicit style targeting the HierarchicalGroupByControl class that changes the value of the NoGroupContent property to display "Hello World" rather than "Drag a column header here to group by that column."

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
 xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
  <Grid.Resources>
   <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                      Source="{Binding Source={x:Static Application.Current},
                                                Path=Orders}"/>

   <Style TargetType="{x:Type xcdg:HierarchicalGroupByControl}">
      <Setter Property="NoGroupContent"
              Value="Hello World" />
   </Style>

  </Grid.Resources>

  <xcdg:DataGridControl x:Name="OrdersGrid"
                      ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
 
</Grid>

ShowCentering column titles

The following example demonstrates how to center the column titles that are displayed as the content of the corresponding column-manager cells by creating an implicit style that targets the ColumnManagerCell data type and that sets the HorizontalContentAlignment and VerticalContentAlignment properties to Center.

XAML Copy Code
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
     <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                        Source="{Binding Source={x:Static Application.Current},
                                                  Path=Orders}" />
     <Style TargetType="{x:Type xcdg:ColumnManagerCell}">
        <Setter Property="HorizontalContentAlignment"
                Value="Center"/>
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
     </Style>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                      ItemsSource="{Binding Source={StaticResource cvs_orders}}" />
</Grid>

ShowApplying a card background brush

The following example demonstrates how to apply one of the custom background brushes (provided by Xceed) cards (i.e., data rows) by creating an implicit style that targets DataRow and that sets the background property.

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
    <Grid.Resources>
       <xcdg:DataGridCollectionViewSource x:Key="cvs_products"
                                    Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/>

      <Style TargetType="{x:Type xcdg:DataRow}">
         <Setter Property="Background"
                 Value="{x:Static xcdg:CardBackgroundBrushes.Retro}"/>
      </Style>  

    </Grid.Resources>

    <xcdg:DataGridControl x:Name="ProductsGrid"
                          ItemsSource="{Binding Source={StaticResource cvs_products}}">
       <xcdg:DataGridControl.Columns>
          <xcdg:Column FieldName="ProductName"
                       IsMainColumn="True"/>
       </xcdg:DataGridControl.Columns>
       <xcdg:DataGridControl.View>
          <xcdg:CardflowView3D CardHeightToViewportRatio="0.5">
             <xcdg:CardflowView3D.Theme>
                <xcdg:ChameleonTheme/>
             </xcdg:CardflowView3D.Theme>
          </xcdg:CardflowView3D>           
       </xcdg:DataGridControl.View>
    </xcdg:DataGridControl>
 </Grid>