Represents a content control that displays the value of one or more cells in the first visible row when a grid is scrolled.
All examples in this topic assume that the grid is bound to the
Orders table of the Northwind database, unless stated otherwise.
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>
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