Customizing Table Views

Glossary Item Box

The following page provides a list of examples that demonstrate how to customize the appearance of table views. For more table view-related information, refer to the Table View topic.

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

ShowAdding an InsertionRow to the fixed headers

The following example demonstrates how to add an InsertionRow to the fixed header section of a grid. 

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}"/>
   </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.View>
         <xcdg:TableView>
           <xcdg:TableView.FixedHeaders>
              <DataTemplate>
                 <xcdg:InsertionRow/>
              </DataTemplate>
           </xcdg:TableView.FixedHeaders>
         </xcdg:TableView>
      </xcdg:DataGridControl.View>
   </xcdg:DataGridControl>
</Grid>

ShowClearing a fixed header section

The following example demonstrates how to clear the content of all header and footer sections of a grid using its view's UseDefaultHeadersFooters property.

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}"/>
   </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.View>
         <xcdg:CardView UseDefaultHeadersFooters="False"/>
       </xcdg:DataGridControl.View>
   </xcdg:DataGridControl>
</Grid>

ShowAdding vertical and horizontal grid lines

The following example demonstrates how to add vertical and horizontal grid lines to a grid in table-view layout. A style for the ColumnManagerRow objects has been added to the resources to remove the horizontal grid line drawn above the column-manager row in the fixed headers.

XAML Copy Code

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
   <Grid.Resources>
      <Style TargetType="{x:Type xcdg:ColumnManagerRow}">
         <Setter Property="BorderThickness" Value="0"/>
      </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.View>

        <xcdg:TableView HorizontalGridLineThickness="1" VerticalGridLineThickness="1">
           <xcdg:TableView.HorizontalGridLineBrush>
              <SolidColorBrush Color="Orange"/>
           </xcdg:TableView.HorizontalGridLineBrush>
           <xcdg:TableView.VerticalGridLineBrush>
              <SolidColorBrush Color="Orange"/>
           </xcdg:TableView.VerticalGridLineBrush>
        </xcdg:TableView>

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

ShowHiding the group-level indicator pane

The following example demonstrates how to hide the group-level indicator pane by creating a style which sets the Visibility property of GroupLevelIndicatorPane objects to Collapsed.

XAML Copy Code

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

     <Style TargetType="{x:Type xcdg:GroupLevelIndicatorPane}">
       <Setter Property="Visibility" Value="Collapsed"/>
     </Style>

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

      <xcdg:DataGridCollectionViewSource.GroupDescriptions>
        <xcdg:DataGridGroupDescription PropertyName="ShipCountry"/>
      </xcdg:DataGridCollectionViewSource.GroupDescriptions>
    </xcdg:DataGridCollectionViewSource>
  </Grid.Resources>

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

ShowHiding the row-selector pane

The following example demonstrates how to hide the row-selector pane. 

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}"/>
  </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.View>
        <xcdg:TableView ShowRowSelectorPane="False"/>
      </xcdg:DataGridControl.View>
   </xcdg:DataGridControl>
</Grid>

ShowFixing columns

The following example demonstrates how to fix the ShipCountry and ShipCity 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}"/>
  </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>

ShowAllowing horizontal scrolling

The following example demonstrates how to prevent horizontal scrolling of the group-by control in the fixed header section.

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}">
      <xcdg:DataGridCollectionViewSource.GroupDescriptions>
        <xcdg:DataGridGroupDescription PropertyName="ShipCountry"/>
      </xcdg:DataGridCollectionViewSource.GroupDescriptions>
    </xcdg:DataGridCollectionViewSource>
  </Grid.Resources>

  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
    <xcdg:DataGridControl.View>
      <xcdg:TableView UseDefaultHeadersFooters="False">
        <xcdg:TableView.FixedHeaders>

          <DataTemplate>
            <xcdg:GroupByControl xcdg:TableView.CanScrollHorizontally="True"/>
          </DataTemplate>

          <DataTemplate>
            <xcdg:ColumnManagerRow/>
          </DataTemplate>
        </xcdg:TableView.FixedHeaders>
      </xcdg:TableView>
    </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>