Xceed DataGrid for WPF v7.2 Documentation
Chameleon Theme
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.2 > Xceed DataGrid for WPF > DataGrid Fundamentals > Views and Themes > Themes > Multi-surface Themes > Chameleon Theme
Prerequisite Knowledge
Views and Themes: Multi-surface Themes Overview

The Chameleon multi-surface theme, which is represented by the ChameleonTheme class, is a two-tone theme that provides full control over its gradient color scheme.


Figure 1: Chameleon theme with default surface configurations
               and color scheme

The Chameleon theme is contained in the "Views 3D" assembly (Xceed.Wpf.DataGrid.Views3D.dll), and like other themes, it can be set using either attribute syntax or property element syntax through a multi-surface view's Theme property (see Example 1).

Theme Color scheme Attribute syntax Property element syntax Target views Assembly
Chameleon [View.]Chameleon
[View.]ChameleonTheme		 ChameleonTheme CardflowView3D Xceed.Wpf.DataGrid.Views3D

Gradient Color Scheme

Unique to the Chameleon multi-surface theme is the ability to control the colors that are used to create its gradient. Through the GradientLightColor and GradientDarkColor properties, the colors that will be blended from top to bottom, respectively, can be provided (see Example 2).

Default Surface Configurations

Like all multi-surface themes, the Chameleon theme provides the default SurfaceConfigurations that will be applied to a multi-surface view's surfaces (see Table 1 for a list of the default surface configurations). These default configurations can be overridden by adding surface configurations to a theme's SurfaceConfigurations collection and specifying the surfaces to which they will be applied using the Surfaces attached property defined on the multi-surface view (see Examples 1 and 3 in Surface Configurations).

If a surface configuration is added to the SurfaceConfigurations collection but does not specify the surfaces to which it should be applied, it will be ignored. If more than one configuration specifies the same surface, the last one on which the Surfaces attached property was set will be used.

Table 1: Default Chameleon surface configurations

Multi-surface view Surface Default surface configuration Index
CardflowView3D Left ImageAndTitleSurfaceConfiguration 0
CardflowView3D Right ImageAndTitleSurfaceConfiguration 1
CardflowView3D Center CompleteSurfaceConfiguration 2
CardflowView3D Back DataSurfaceConfiguration 3

Title-region Positions

For some surface configurations, the Chameleon theme supports more than one title-region position (see Table 2). As such, it exposes a TitleRegionPosition attached property that can be set on any of the supported surface configurations to change the position of the title region. The TitleRegionPosition property can also be set directly on the theme to change the title-region position of all the supported surface configurations.

Table 2: Possible title-region positions

Surface configuration Positions
TitleSurfaceConfiguration Left and Right
ImageAndTitleSurfaceConfiguration Left and Right
CompleteSurfaceConfiguration Left and Right
TitleAndDataSurfaceConfiguration Left and Right

Examples

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

Example 1: Using the Chameleon theme

The following example demonstrates how to set a multi-surface theme using property element syntax.

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

        <xcdg:CardflowView3D>

           <xcdg:CardflowView3D.Theme>

              <xcdg:ChameleonTheme/>

           </xcdg:CardflowView3D.Theme>

        </xcdg:CardflowView3D>

     </xcdg:DataGridControl.View>

   </xcdg:DataGridControl>

</Grid>
VB.NET
Copy Code 
Dim view As New CardflowView3D()

view.Theme = New ChameleonTheme()

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

view.Theme = new ChameleonTheme();

dataGridControl.View = view;

 

Example 2: Providing new gradient colors

The following example demonstrates how to change the gradient applied to the card surfaces when using the Chameleon theme.

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:Column FieldName="Notes" Visible="False"/>

          <xcdg:Column FieldName="ReportsTo" Visible="False"/>

          <xcdg:Column FieldName="StillEmployed" Visible="False"/>

          <xcdg:Column FieldName="TitleOfCourtesy" Visible="False"/>

       </xcdg:DataGridControl.Columns>

       <xcdg:DataGridControl.View>

          <xcdg:CardflowView3D>

            <xcdg:CardflowView3D.Theme>

               <xcdg:ChameleonTheme GradientLightColor="Pink"

                                    GradientDarkColor="Purple">

                 

               </xcdg:ChameleonTheme>                 

            </xcdg:CardflowView3D.Theme>

          </xcdg:CardflowView3D>

       </xcdg:DataGridControl.View>

    </xcdg:DataGridControl>

 </Grid>
VB.NET
Copy Code 
dataGridControl.Columns( "LastName" ).IsMainColumn = True

dataGridControl.Columns( "Notes" ).Visible= False

dataGridControl.Columns( "ReportsTo" ).Visible = False

dataGridControl.Columns( "StillEmployed" ).Visible = False

dataGridControl.Columns( "TitleOfCourtesy" ).Visible = False

Dim theme As New ChameleonTheme()

theme.GradientLightColor = Brushes.Pink.Color

theme.GradientDarkColor = Brushes.Purple.Color

Dim view As New CardflowView3D()

view.Theme = theme

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

dataGridControl.Columns[ "Notes" ].Visible= false;

dataGridControl.Columns[ "ReportsTo" ].Visible = false;

dataGridControl.Columns[ "StillEmployed" ].Visible = false;

dataGridControl.Columns[ "TitleOfCourtesy" ].Visible = false;

ChameleonTheme theme = new ChameleonTheme();

theme.GradientLightColor = Brushes.Pink.Color;

theme.GradientDarkColor = Brushes.Purple.Color;

CardflowView3D view = new CardflowView3D();

view.Theme = theme;

dataGridControl.View = view;
Show AllShow All
Hide AllHide All
See Also

Advanced Concepts

Custom Surface Configurations
Custom Multi-surface Themes

 

 

Copyright Xceed Software Inc

Send Feedback