Xceed DataGrid for WPF v7.2 Documentation
Customizing Cardflow 3D Views
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.2 > Xceed DataGrid for WPF > Code Snippets > 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, refer to the Cardflow 3D View topic. 

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.

XAML
Copy Code 
<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>
VB.NET
Copy Code 
dataGridControl.Columns( "LastName" ).IsMainColumn = True

Dim view As New CardflowView3D()

Dim theme As New ElementalBlackTheme()

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

Dim imageAndTitleSurfaceConfiguration As new ImageAndTitleSurfaceConfiguration()

imageAndTitleSurfaceConfiguration.SetValue( CardflowView3D.SurfacesProperty, CardflowView3DSurfaces.Center )

' By default, the value of the main column will be displayed in the title regions.

Dim titleSurfaceConfiguration As New TitleSurfaceConfiguration()

titleSurfaceConfiguration.SetValue( CardflowView3D.SurfacesProperty, CardflowView3DSurfaces.Left And CardflowView3DSurfaces.Right )

theme.SurfaceConfigurations.Add( imageAndTitleSurfaceConfiguration )

theme.SurfaceConfigurations.Add( titleSurfaceConfiguration )

view.Theme = theme

dataGridControl.View = view
C#
Copy Code 
dataGridControl.Columns[ "LastName" ].IsMainColumn = true;

CardflowView3D view = new CardflowView3D();

ElementalBlackTheme theme = new ElementalBlackTheme();

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

ImageAndTitleSurfaceConfiguration imageAndTitleSurfaceConfiguration = new ImageAndTitleSurfaceConfiguration();

imageAndTitleSurfaceConfiguration.SetValue( CardflowView3D.SurfacesProperty, CardflowView3DSurfaces.Center );

// By default, the value of the main column will be displayed in the title regions.

TitleSurfaceConfiguration titleSurfaceConfiguration = new TitleSurfaceConfiguration();

titleSurfaceConfiguration.SetValue( CardflowView3D.SurfacesProperty, CardflowView3DSurfaces.Left | CardflowView3DSurfaces.Right );

theme.SurfaceConfigurations.Add( imageAndTitleSurfaceConfiguration );

theme.SurfaceConfigurations.Add( titleSurfaceConfiguration );

view.Theme = theme;

dataGridControl.View = view;

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.

XAML
Copy Code 
<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>
VB.NET
Copy Code 
Dim brush As New LinearGradientBrush()

brush.GradientStops.Add( New GradientStop( Color.FromArgb( 255, 14, 14, 14 ), 0 ) )

brush.GradientStops.Add( New GradientStop( Color.FromArgb( 255, 50, 50, 50 ), 0.33 ) )

brush.GradientStops.Add( New GradientStop( Color.FromArgb( 255, 76, 76, 76 ), 0.63 ) )

brush.GradientStops.Add( New GradientStop( Color.FromArgb( 255, 148, 148, 148 ), 1 ) )

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

Dim view As New CardflowView3D()

view.SideCardsCount = 1

view.EmptySurfaceBrush = brush

view.Theme = New ElementalBlackTheme()

dataGridControl.View = view
C#
Copy Code 
LinearGradientBrush brush = new LinearGradientBrush();

brush.GradientStops.Add( new GradientStop( Color.FromArgb( 255, 14, 14, 14 ), 0 ) );

brush.GradientStops.Add( new GradientStop( Color.FromArgb( 255, 50, 50, 50 ), 0.33 ) );

brush.GradientStops.Add( new GradientStop( Color.FromArgb( 255, 76, 76, 76 ), 0.63 ) );

brush.GradientStops.Add( new GradientStop( Color.FromArgb( 255, 148, 148, 148 ), 1 ) );

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

CardflowView3D view = new CardflowView3D();

view.SideCardsCount = 1;

view.EmptySurfaceBrush = brush;

view.Theme = new ElementalBlackTheme();

dataGridControl.View = view;

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
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}"/>

      

    </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>
VB.NET
Copy Code 
dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed
C#
Copy Code 
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.

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>

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.

VB.NET
Copy Code 
Private m_fullSurfaceConfiguration As New ImageAndDataSurfaceConfiguration()

Private Sub ApplyCoercedSurfaceConfiguration( ByVal sender As Object, ByVal e As RoutedEventArgs )

  If Not Me.ProductsGrid.CurrentItem Is Nothing Then

    Dim card As Xceed.Wpf.DataGrid.DataRow = CType( Me.ProductsGrid.GetContainerFromItem( _

                                         Me.ProductsGrid.CurrentItem ), Xceed.Wpf.DataGrid.DataRow )

    If Not card Is Nothing Then

       card.SetValue( MultiSurfaceViewBase.CoercedSurfaceConfigurationProperty, m_fullSurfaceConfiguration )

    End If

  End If

End Sub
C#
Copy Code 
private ImageAndDataSurfaceConfiguration m_fullSurfaceConfiguration = new ImageAndDataSurfaceConfiguration();

private void ApplyCoercedSurfaceConfiguration( object sender, RoutedEventArgs e )

{

  if( this.ProductsGrid.CurrentItem != null )

  {

   Xceed.Wpf.DataGrid.DataRow card = this.ProductsGrid.GetContainerFromItem(

                                        this.ProductsGrid.CurrentItem ) as Xceed.Wpf.DataGrid.DataRow;

   if( card != null )

   {

     card.SetValue( MultiSurfaceViewBase.CoercedSurfaceConfigurationProperty, m_fullSurfaceConfiguration );

   }

  }

}

The following XAML demonstrates how to define the initial surface configurations that are applied to various surfaces. 

XAML
Copy Code 
<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>

Show AllShow All
Hide AllHide All

 

 

Copyright Xceed Software Inc

Send Feedback