Skip to main content

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.

tip

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.

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

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.

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

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.

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

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