Xceed Logo
Shop
Xceed DataGrid for WPF v7.3 Documentation
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.3 / Xceed DataGrid for WPF / Code Snippets / Customizing Views and Themes
    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