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. |
Adding 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> |
Clearing 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> |
Adding 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> |
Hiding 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> |
Hiding 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> |
Fixing 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> |
Allowing 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> |
Show All / Hide All Linkblock