Please note that this control has been retired and is now obsolete to the XamDataGrid control, and as such, we recommend migrating to that control. It will not be receiving any new features, bug fixes, or support going forward. For help or questions on migrating your codebase to the XamDataGrid, please contact support.
When you enable deferred scrolling, the default preview displays the value of the first column of xamGrid™. However, you can also create your own data template to customize this preview.
Assumptions
This topic assumes that you already have a xamGrid control bound to data on your page. For more information, see the Binding xamGrid to Data topic. This topic also assumes that you have deferred scrolling enabled. For more information, see the Deferred Scrolling topic.
You will customize the deferred scrolling settings by setting the DeferredScrollingSettings object’s DeferredScrollTemplate property to a custom data template. This data template will display the value in the ProductName and shade the xamGrid control a different color.
Add tags for the DeferredScrollTemplate property to xamGrid.
In XAML:
<ig:XamGrid.DeferredScrollingSettings>
<ig:DeferredScrollingSettings AllowDeferredScrolling="Default">
<ig:DeferredScrollingSettings.DeferredScrollTemplate>
<!-- Add DataTemplate -->
</ig:DeferredScrollingSettings.DeferredScrollTemplate>
</ig:DeferredScrollingSettings>
</ig:XamGrid.DeferredScrollingSettings>
Create a DataTemplate. The deferred scrolling template’s data context is a ScrollTipInfo object; therefore, you can bind the following properties exposed by the ScrollTipInfo object within this data template.
Row
FirstColumnValue
Column
Add a Grid panel to the DataTemplate.
Add a Rectangle to the Grid panel. This rectangle will be displayed over xamGrid to give the appearance of shading.
Set the following properties on the Rectangle:
Fill – Blue
Opacity – 0.65
In XAML:
<DataTemplate>
<Grid>
<Rectangle Fill="Blue" Opacity="0.65"/>
<!--Add StackPanel -->
</Grid>
</DataTemplate>
Add a StackPanel container to the Grid panel. Set the following properties:
HorizontalAlignment – Center
VerticalAlignment – Center
In XAML:
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <!-- Add TextBlock --> </StackPanel>
Add a TextBox control to the StackPanel container. You will display information from the ProductName column in this TextBox control.
Set the following properties:
Text – {Binding Path = Row.Data.ProductName}
Foreground – White
In XAML:
<TextBlock Text="{Binding Path=Row.Data.ProductName}" Foreground="White"/>
Save and run your application.
