Sticky columns is an innovative new feature that was added to version 1.1 of Xceed DataGrid for Silverlight. It’s also one of the features that encountered the most resistance from the development team simply because we did not know how it could be used or if it would be used at all. But after various prototypes, we all came to the conclusion that, yes, sticky columns had a reason for being and could benefit most applications, if used properly. Now that you are both intrigued and worried, let's get started!

A "sticky" column will always remain in the viewport. When scrolling, once a column that has been marked as sticky reaches the left or right edge of the viewport, it will "stick" to it and the other columns will continue to scroll out of view. If additional columns are marked as sticky, they will stick to the left or right of any columns that are already stuck to the edge of the viewport. A column that has been "stuck" will preserve its position, meaning that when the column to its immediate left or right is brought back into view, it will regain its position and scroll along with the other columns. Take a look.

In the video, the sticky columns are those that have a pushpin in their column header. When they are stuck, they take on a blue highlight to indicate their state.

Notice that the first column in the viewport also has a blue highlight and a pushpin, but does not scroll. This column, in addition to being sticky, is also fixed. Why? Because it is the first column in the grid and has been marked as sticky; a similar effect would occur if it had been the last column. So simply positioning a column in the correct position and marking it as sticky will result in the columns being fixed. You want more than one fixed column? Any columns also marked as sticky whose visible positions are next to the first or last fixed columns will also be considered fixed.

So how does it all work? Very simply :)

Every column has an IsSticky property, which can be programmatically set to true to mark the column as sticky. When this happens, a pushpin will be displayed in the column’s header to provide a visual representation of the column’s stickability. The ability to mark a column as sticky is also be made available to the end user by setting a column's AllowSticky property to true (default). If set to false, the end user will not be able to change column stickiness. End-user interaction with stick columns can be disabled for all columns by setting the AllowStickyColumns property, which is defined on the column-manager row (see ColumnManagerRow class), to false. So if you wanted to only allow a few columns to become sticky, you would set the AllowStickyColumns property to false on the column-manager row and the AllowSticky properties of the desired columns to true. For example:

<sldg:DataGridControl x:Name="netflixGrid"
                      ItemsSource="{Binding Path=NetflixTitles}"
                      ReadOnly="True">
   <sldg:DataGridControl.Resources>
      <Style TargetType="{sldg:ColumnManagerRow}">
         <Setter Property="AllowStickyColumns"
                 Value="False"/>
      </Style>
   </sldg:DataGridControl.Resources>

   <sldg:DataGridControl.Columns>
      <sldg:Column FieldName="BoxArt"
                   Title=""
                   Width="100"
                   AllowSticky="True"/>
      <sldg:Column FieldName="ShortName"
                   Title="Title"
                   Width="200"
                   AllowSticky="True"
                   IsSticky="True" />
   </sldg:DataGridControl.Columns>
</sldg:DataGridControl>

The visibility of the pushpin that indicates that a column is sticky can be modified through the StickyColumnToggleButtonVisibility property, which is defined at both the column and the column-manager row levels. By default, it is set to Auto, meaning that it will only be displayed when a column is stuck or when the mouse is over the column header. It can also be set to Always or Never to keep it permanently displayed or hidden, respectively.