Xceed DataGrid for WPF v7.2 Documentation
SurfaceConfiguration Class
Members  Example 


Xceed.Wpf.DataGrid Assembly > Xceed.Wpf.DataGrid.Views.Surfaces Namespace : SurfaceConfiguration Class
Represents configurations that can be applied to any surface exposed by a multi-surface view and supports various regions in which data can be displayed.
Syntax
'Declaration
 
<TypeDescriptionProviderAttribute(MS.Internal.ComponentModel.DependencyObjectProvider)>
<NameScopePropertyAttribute("NameScope", System.Windows.NameScope)>
Public MustInherit Class SurfaceConfiguration 
   Inherits System.Windows.DependencyObject
'Usage
 
Dim instance As SurfaceConfiguration
[TypeDescriptionProvider(MS.Internal.ComponentModel.DependencyObjectProvider)]
[NameScopeProperty("NameScope", System.Windows.NameScope)]
public abstract class SurfaceConfiguration : System.Windows.DependencyObject 
Example

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

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.The following example demonstrates how to define default and explicit region configurations.
<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>
<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}"
                                        AutoCreateItemProperties="False">
        <xcdg:DataGridCollectionViewSource.ItemProperties>
           <!--Will be explicitly positioned in the default "Title" region.-->
           <xcdg:DataGridItemProperty Name="Title"/>
           <xcdg:DataGridItemProperty Name="FirstName"/>
           <xcdg:DataGridItemProperty Name="LastName"/>
           <xcdg:DataGridItemProperty Name="TitleOfCourtesy"/>
           <!--Will be automatically detected as containing an image and displayed in the "Image" region.-->
           <xcdg:DataGridItemProperty Name="Photo"/>
           <!--Will appear in the "Data" region. There is no need to explicitly position them as, by default,
                the "Data" region displays information from the fields that have not been explicitly
                assigned to another region.-->
           <xcdg:DataGridItemProperty Name="EmployeeID"
                                      Title="Employee Identification #"/>
           <xcdg:DataGridItemProperty Name="Address"/>
           <xcdg:DataGridItemProperty Name="City"/>
           <xcdg:DataGridItemProperty Name="Country"/>
           <xcdg:DataGridItemProperty Name="PostalCode"
                                      Title="Postal Code"/>
           <xcdg:DataGridItemProperty Name="HomePhone"
                                      Title="Home Phone Number"/>
           <xcdg:DataGridItemProperty Name="BirthDate"
                                      Title="Date of Birth"/>
        </xcdg:DataGridCollectionViewSource.ItemProperties>
     </xcdg:DataGridCollectionViewSource>
    </Grid.Resources>
 
    <xcdg:DataGridControl x:Name="EmployeesGrid"
                          ItemsSource="{Binding Source={StaticResource cvs_employees}}">
     <xcdg:DataGridControl.View>
        <xcdg:CardflowView3D>
           <xcdg:CardflowView3D.Theme>
              <xcdg:ElementalBlackTheme>

                <!-- The DefaultTitleRegionConfiguration will be applied to all title regions in all surfaces
                     for which a RegionConfiguration has not been explicitly provided. -->
                <xcdg:ElementalBlackTheme.DefaultTitleRegionConfiguration>
                   <xcdg:RegionConfiguration FieldNames="TitleOfCourtesy, FirstName, LastName, Title"
                                             ReadOnly="True">
                      <xcdg:RegionConfiguration.Template>
                         <DataTemplate>
                            <Viewbox>
                               <StackPanel>
                                  <StackPanel Orientation="Horizontal"
                                              HorizontalAlignment="Center">
                                     <StackPanel.Resources>
                                        <Style TargetType="{x:Type xcdg:DataCell}">
                                           <Setter Property="Margin"
                                                   Value="0, 0, 3, 0"/>
                                        </Style>
                                     </StackPanel.Resources>
                                     <xcdg:DataCell FieldName="TitleOfCourtesy"/>
                                     <xcdg:DataCell FieldName="FirstName"/>
                                     <xcdg:DataCell FieldName="LastName"/>
                                  </StackPanel>
                                  <xcdg:DataCell FieldName="Title"
                                                 TextElement.FontSize="10"
                                                 HorizontalContentAlignment="Center"/>
                               </StackPanel>
                            </Viewbox>
                         </DataTemplate>
                      </xcdg:RegionConfiguration.Template>
                   </xcdg:RegionConfiguration>
                </xcdg:ElementalBlackTheme.DefaultTitleRegionConfiguration>
                <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"/>
                   <!-- Explicitly define a new template for the TitleRegionConfiguration since
                        we want to use one that is different from the one provided in the
                        DefaultTitleRegionConfiguration. In this situation, the names of the
                        fields to display in the title region must be provided. -->
                   <xcdg:TitleSurfaceConfiguration xcdg:CardflowView3D.Surfaces="Left, Right">
                      <xcdg:TitleSurfaceConfiguration.TitleRegionConfiguration>
                         <xcdg:RegionConfiguration FieldNames="FirstName, LastName"
                                                   ReadOnly="True">
                            <xcdg:RegionConfiguration.Template>
                               <DataTemplate>                                    
                                   <!--In this example, a fixed font size is not ideal since we don't
                                        know the final size of a card and we want the font size of the Title
                                        to vary along with the card size; therfore, we will place everything
                                        in a Viewbox, which will handle everything.-->
                                   <Viewbox>
                                      <!-- Using a Viewbox will stretch each title according to its
                                           content resulting in titles that can be of various sizes.
                                           This result may not always be esthetically pleasing and can
                                           also produce perspective problems (optical illusions).
                                           Giving the root element of the Viewbox an arbitrary width
                                           will correct this undesirable behavior. This size of 100 was
                                           determined by trial and error using our data source and it may
                                           be appropriate to change it according to the data.-->
                                      <Grid Width="100">
                                         <!--This grid is used to center the title when its desired
                                              width is less than 100.-->
                                         <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                         </Grid.ColumnDefinitions>
                                        <StackPanel Orientation="Horizontal"
                                                    Grid.Column="1">
                                           <xcdg:DataCell FieldName="FirstName"
                                                          Margin="0, 0, 3, 0"/>
                                           <xcdg:DataCell FieldName="LastName"/>
                                        </StackPanel>                       
                                     </Grid>
                                   </Viewbox> 
                              </DataTemplate>
                            </xcdg:RegionConfiguration.Template>
                         </xcdg:RegionConfiguration>
                      </xcdg:TitleSurfaceConfiguration.TitleRegionConfiguration>
                   </xcdg:TitleSurfaceConfiguration>
                   <!-- In this surface configuration there is no need to specify the field names to use since:
                          - the image field is automatically detected and used in the image region
                          - the fields used in the title region are specified in the
                            DefaultTitleRegionConfiguration
                          - the fields that have not been explicitly assigned to a specific region will
                            automatically be placed in the default "Data" region. -->
                   <xcdg:CompleteSurfaceConfiguration xcdg:CardflowView3D.Surfaces="Back"/>
                </xcdg:ElementalBlackTheme.SurfaceConfigurations>  
             </xcdg:ElementalBlackTheme>
           </xcdg:CardflowView3D.Theme>
        </xcdg:CardflowView3D>
     </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>     
</Grid>
Inheritance Hierarchy

System.Object
   System.Windows.Threading.DispatcherObject
      System.Windows.DependencyObject
         Xceed.Wpf.DataGrid.Views.Surfaces.SurfaceConfiguration
            Xceed.Wpf.DataGrid.Views.Surfaces.CompleteSurfaceConfiguration
            Xceed.Wpf.DataGrid.Views.Surfaces.DataSurfaceConfiguration
            Xceed.Wpf.DataGrid.Views.Surfaces.ImageAndDataSurfaceConfiguration
            Xceed.Wpf.DataGrid.Views.Surfaces.ImageAndTitleSurfaceConfiguration
            Xceed.Wpf.DataGrid.Views.Surfaces.ImageSurfaceConfiguration
            Xceed.Wpf.DataGrid.Views.Surfaces.TitleAndDataSurfaceConfiguration
            Xceed.Wpf.DataGrid.Views.Surfaces.TitleSurfaceConfiguration

Requirements

Target Platforms: Windows 11, Windows 10, Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

See Also

Reference

SurfaceConfiguration Members
Xceed.Wpf.DataGrid.Views.Surfaces Namespace