Skip to main content

Customizing Cardflow 3D Views

The following page provides a list of examples that demonstrate how to customize the appearance of Cardflow 3D views. For more Cardflow 3D view-related information.

tip

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

Providing surface configurations​

The following example demonstrates how to provide an image and title surface configuration that will be applied to the center surface and a title surface configuration that will be applied to the left and right side cards.

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

  </Grid.Resources>

  <xcdg:DataGridControl x:Name="EmployeesGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_employees}}">
    <xcdg:DataGridControl.Columns>
        <xcdg:Column FieldName="LastName"
                    IsMainColumn="True"/>
    </xcdg:DataGridControl.Columns>
    <xcdg:DataGridControl.View>
      <xcdg:CardflowView3D>
          <xcdg:CardflowView3D.Theme>
            <xcdg:ElementalBlackTheme>
                <xcdg:ElementalBlackTheme.SurfaceConfigurations>
                  <!-- Because an attempt is made to automatically detect an image in the data
                        item, there is no need to specify the name of the field that contains
                        the image in the surface configuration's ImageRegionConfiguration.
                      
                        If a data item contains more than one image you can set the FieldNames
                        property of the ImageRegionConfiguration to the name of the field that
                        contains the desired image. -->
                  <xcdg:ImageAndTitleSurfaceConfiguration xcdg:CardflowView3D.Surfaces="Center"/>
                
                  <!-- By default, the value of the main column will be displayed in the title regions. -->
                  <xcdg:TitleSurfaceConfiguration xcdg:CardflowView3D.Surfaces="Left, Right"/>
                </xcdg:ElementalBlackTheme.SurfaceConfigurations>
            </xcdg:ElementalBlackTheme>
          </xcdg:CardflowView3D.Theme>
      </xcdg:CardflowView3D>
    </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>

Providing an empty-surface brush​

The following example demonstrates how to provide an empty-surface brush, which will be applied to all cards that do not display a surface.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
    <Grid.Resources>
      <xcdg:DataGridCollectionViewSource x:Key="cvs_employees"
                                        Source="{Binding Source={x:Static Application.Current}, Path=EmployeesTable}"/>
  
      <LinearGradientBrush x:Key="emptySurfaceBrush"
                            StartPoint="0.5,1"
                            EndPoint="0.5,0">
          <GradientStop Offset="0" Color="#FF0E0E0E"/>
          <GradientStop Offset="0.33" Color="#FF323232"/>
          <GradientStop Offset="0.63" Color="#FF4C4C4C"/>
          <GradientStop Offset="1" Color="#FF949494"/>
      </LinearGradientBrush>
    </Grid.Resources>
  
    <xcdg:DataGridControl x:Name="EmployeesGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_employees}}">
    <xcdg:DataGridControl.Columns>
        <xcdg:Column FieldName="LastName"
                    IsMainColumn="True"/>
    </xcdg:DataGridControl.Columns>
    <xcdg:DataGridControl.View>      
      <xcdg:CardflowView3D SideCardsCount="1"
                            EmptySurfaceBrush="{StaticResource emptySurfaceBrush}">
          <xcdg:CardflowView3D.Theme>
              <xcdg:ElementalBlackTheme/>
          </xcdg:CardflowView3D.Theme>
        </xcdg:CardflowView3D>
    </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.

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

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>

Coercing a surface configuration​

The following example demonstrates how to apply a different surface configuration on the back surface of the center card using the CoercedSurfaceConfiguration attached property.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">     
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.Resources>
      
      <xcdg:DataGridCollectionViewSource x:Key="cvs_products"
                                      Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/>
    </Grid.Resources>
  <Button Content="Coerce Surface Configuration"
          Click="ApplyCoercedSurfaceConfiguration"
          Grid.Row="0"/>
    <xcdg:DataGridControl x:Name="ProductsGrid"
                          ItemsSource="{Binding Source={StaticResource cvs_products}}"
                          Grid.Row="1">
      <xcdg:DataGridControl.Columns>
          <xcdg:Column FieldName="ProductName"
                      IsMainColumn="True"/>
      </xcdg:DataGridControl.Columns>
      <xcdg:DataGridControl.View>
        <xcdg:CardflowView3D CardHeightToViewportRatio="0.5">
            <xcdg:CardflowView3D.Theme>
              <xcdg:ElementalBlackTheme>
                  <xcdg:ElementalBlackTheme.SurfaceConfigurations>
                    <xcdg:ImageSurfaceConfiguration xcdg:CardflowView3D.Surfaces="Left, Right"/>
                    <xcdg:ImageAndTitleSurfaceConfiguration xcdg:CardflowView3D.Surfaces="Center"/>
                    <xcdg:CompleteSurfaceConfiguration xcdg:CardflowView3D.Surfaces="Back"
                                                        AutoFillDefaultRegion="False">
                        <xcdg:CompleteSurfaceConfiguration.DataRegionConfiguration>
                          <xcdg:RegionConfiguration FieldNames="ProductID, UnitPrice, UnitsInStock"/>
                        </xcdg:CompleteSurfaceConfiguration.DataRegionConfiguration>                      
                    </xcdg:CompleteSurfaceConfiguration>
                  </xcdg:ElementalBlackTheme.SurfaceConfigurations>
              </xcdg:ElementalBlackTheme>
            </xcdg:CardflowView3D.Theme>
        </xcdg:CardflowView3D>           
      </xcdg:DataGridControl.View>
    </xcdg:DataGridControl>
  </Grid>