Customizing Card Views

The following page provides a list of examples that demonstrate how to customize the appearance of card views.

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.

<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

<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>

C#

  CardView view = new CardView();
  view.UseDefaultHeadersFooters = false;
  dataGridControl.View = view;

VB.NET

  Dim view As New CardView()
  view.UseDefaultHeadersFooters = False
  dataGridControl.View = view

Changing the main (primary) column

The following example demonstrates how to set the ShipName column as a grid's main column.

XAML

  <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}}"
                          View="CardView">
        <xcdg:DataGridControl.Columns>
          <xcdg:Column FieldName="ShipName" IsMainColumn="True"/>
        </xcdg:DataGridControl.Columns>
    </xcdg:DataGridControl>
  </Grid>

C#

  dataGridControl.Columns[ "ShipName" ].IsMainColumn = true;

VB.NET

  dataGridControl.Columns( "ShipName" ).IsMainColumn = True

Adding separator lines

The following examples demonstrates how to add separator lines between card "columns".

XAML

  <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>

            <xcdg:CardView.SeparatorLinePen>
              <Pen Thickness="1.5" Brush="Orange"
                    DashStyle="{x:Static DashStyles.DashDotDot}"/>
            </xcdg:CardView.SeparatorLinePen>
          </xcdg:CardView>
        </xcdg:DataGridControl.View>
    </xcdg:DataGridControl>
  </Grid>

C#

  Pen pen = new Pen();
  pen.Thickness = 1.5;
  pen.Brush = Brushes.Orange;
  pen.DashStyle = DashStyles.DashDotDot;

  CardView view = new CardView();
  view.SeparatorLinePen = pen;

  dataGridControl.View = view;

VB.NET

  Dim pen As New Pen()
  pen.Thickness = 1.5
  pen.Brush = Brushes.Orange
  pen.DashStyle = DashStyles.DashDotDot

  Dim view As New CardView()
  view.SeparatorLinePen = pen

  dataGridControl.View = view

Recreating the default card-view header

The following example demonstrates how to recreate the default card-view header, which contains a ColumnManagerRow to the right of a GroupByControl.

<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:CardView.FixedHeaders>
         <DataTemplate>
           <DockPanel>
             <!-- OneWay binding is used because we want the ColumnManagerRow's height to
                  follow what is defined by the GroupByControl. A FallbackValue
                  is specified so the initial measure pass has an acceptable minimal
                  value.-->
             <xcdg:ColumnManagerRow DockPanel.Dock="Right"
                                    Height="{Binding ElementName=groupByControl,
                                                     Path=ActualHeight,
                                                     Mode=OneWay,
                                                     FallbackValue=60}"/>
             <xcdg:GroupByControl x:Name="groupByControl"/>
           </DockPanel>
         </DataTemplate>
        </xcdg:CardView.FixedHeaders>
      </xcdg:CardView>
    </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>

Applying a grid background brush

The following example demonstrates how to apply a one of the custom background brushes (provided by Xceed) to a grid's background.

XAML

  <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}"/>
        
      </Grid.Resources>
    <xcdg:DataGridControl x:Name="ProductsGrid"
                          ItemsSource="{Binding Source={StaticResource cvs_products}}"
                          Background="{x:Static xcdg:DataGridControlBackgroundBrushes.AuroraRed}">     
        <xcdg:DataGridControl.Columns>
            <xcdg:Column FieldName="ProductName"
                        IsMainColumn="True"/>
        </xcdg:DataGridControl.Columns>
        <xcdg:DataGridControl.View>
            <!-- In Cardflow 3D view, if a theme is not explicitly specified,
                the Elemental Black theme will be used. -->
            <xcdg:CardflowView3D CardHeightToViewportRatio="0.5"/>
        </xcdg:DataGridControl.View>
      </xcdg:DataGridControl>
  </Grid>

C#

  dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed;

VB.NET

  dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed

Applying 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.

<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>