Xceed DataGrid for WPF v7.2 Documentation
Customizing Views and Themes
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.2 > Xceed DataGrid for WPF > Code Snippets > Customizing Views and Themes

The following page provides a list of examples that demonstrate how to set a view and theme. For more view- and theme-related information, refer to the Views and Themes Overview topic.

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

Setting a view and theme through attribute syntax

The following examples demonstrates how to use attribute syntax to apply a card-view layout, with the normal-color Aero theme, to a grid.

XAML
Copy Code 
<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.Zune.NormalColor"/>
</Grid>
VB.NET
Copy Code 
Dim view As New CardView()
view.Theme = New ZuneNormalColorTheme()
dataGridControl.View = view
C#
Copy Code 
CardView view = new CardView();
view.Theme = new ZuneNormalColorTheme();
dataGridControl.View = view;

Setting a view and theme through property element syntax

The following examples demonstrates how to use property element syntax to apply a card-view layout, with the normal-color Aero theme, to a grid.

XAML
Copy Code 
<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.Theme>
              <xcdg:ZuneNormalColorTheme/>
           </xcdg:CardView.Theme>
        </xcdg:CardView>
     </xcdg:DataGridControl.View>
   </xcdg:DataGridControl>
</Grid>
VB.NET
Copy Code 
Dim view As New CardView()
view.Theme = New ZuneNormalColorTheme()
dataGridControl.View = view
C#
Copy Code 
CardView view = new CardView();
view.Theme = new ZuneNormalColorTheme();
dataGridControl.View = view;

 

Displaying a scroll tip

The following example demonstrates how to display a scroll tip whose content and location have been modified.

The "flagConverter" resource represents a converter that is used to return the appropriate BitmapImage according to the value of the ShipCountry cell.

XAML
Copy Code 
<Grid>
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                                        Path=Orders}"
                                       AutoCreateItemProperties="False">
      <xcdg:DataGridCollectionViewSource.ItemProperties>
        <xcdg:DataGridItemProperty Name="ShipCountry"/>
        <xcdg:DataGridItemProperty Name="ShipCity"/>
        <xcdg:DataGridItemProperty Name="ShipAddress"/>
        <xcdg:DataGridItemProperty Name="ShipPostalCode"/>
        <xcdg:DataGridItemProperty Name="ShipName"/>
        <xcdg:DataGridItemProperty Name="OrderDate"/>
        <xcdg:DataGridItemProperty Name="ShippedDate"/>
        <xcdg:DataGridItemProperty Name="Freight"/>
        </xcdg:DataGridCollectionViewSource.ItemProperties>
      </xcdg:DataGridCollectionViewSource>
    <local:FlagPathConverter x:Key="flagConverter"/>
    <Style TargetType="{x:Type xcdg:ScrollTip}">
      <Setter Property="HorizontalAlignment"
              Value="Center"/>
      <Setter Property="VerticalAlignment"
              Value="Center"/>
      <Setter Property="Width"
              Value="150"/>
      <Setter Property="Height"
              Value="125"/>
    </Style>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
    <xcdg:DataGridControl.Columns>
      <xcdg:Column FieldName="ShipCountry"
                   IsMainColumn="True">
        <xcdg:Column.CellContentTemplate>
          <DataTemplate>
            <Image Source="{Binding Converter={StaticResource flagConverter}}"
                   StretchDirection="DownOnly"/>
          </DataTemplate>
        </xcdg:Column.CellContentTemplate>
      </xcdg:Column>
    </xcdg:DataGridControl.Columns>
    <xcdg:DataGridControl.View>
      <xcdg:TableView ShowScrollTip="True">
        <xcdg:TableView.ScrollTipContentTemplate>
          <DataTemplate>
            <Grid>
              <Image Source="{Binding Path=[ShipCountry], Converter={StaticResource flagConverter}}"/>
              <TextBlock Text="{Binding Path=[ShipCountry]}"
                         FontSize="14"
                         FontWeight="UltraBold"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"/>
           </Grid>
          </DataTemplate>
        </xcdg:TableView.ScrollTipContentTemplate>
      </xcdg:TableView>
    </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>

Enabling the column chooser

The following example demonstrates how to enable the column chooser and change the sort order of the column names it displays.

XAML
Copy Code 
<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.Columns>
       <xcdg:Column FieldName="OrderID"
                    ShowInColumnChooser="False" />
        <xcdg:Column FieldName="EmployeeID"
                     Visible="False" />
        <xcdg:Column FieldName="CustomerID"
                     Visible="False" />
        <xcdg:Column FieldName="ShipVia"
                     Visible="False" />
     </xcdg:DataGridControl.Columns>
     <xcdg:DataGridControl.View>
       <xcdg:TableView AllowColumnChooser="True"
                       ColumnChooserSortOrder="TitleAscending" />
     </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>

 

 

Copyright Xceed Software Inc

Send Feedback