Xceed Community

Merged Column Headers (New in DataGrid for WPF v4.5)

Diane [Xceed] — Mon, 25 Mar 2013 16:19:00 GMT

You have read correctly, Merged Column Headers are finally here!

Many have asked us this feature over the past 2+ years, and while it was not easy to implement, we have heard you and now your patience has finally paid off.

First, let me start off with a little teaser; here is the kind of look that will now be supported built-in when using the new Merged Column Headers:

Now I am sure that you are all impatient to find out exactly how to use them, so let’s jump right in!

Part 1: Theory

Here are the Classes that you will need to use to get the Merged Column Headers to work:

At the UI level: MergedColumnManagerRow, MergedColumnManagerCell

At the Data Level: MergedHeader, MergedHeaderCollection, MergedColumn, MergedColumnCollection

Part 2: Practice

I will use the example shown in the teaser screen shot for this tutorial. First, let’s start by visualizing this new look in a simple layout:

As you can see, we have 2 MergedColumnManagerRows and then the ColumnManagerRow. This order is very important: the ColumnManagerRow will always be the last one at the bottom, and any MergedColumnManagerRow must be declared in the order they will appear on screen, from top to bottom.

<xcdg:DataGridControl.View>

<xcdg:TableflowView UseDefaultHeadersFooters="False">

<xcdg:TableflowView.FixedHeaders>

<xcdg:MergedColumnManagerRow />

</DataTemplate>

<xcdg:MergedColumnManagerRow />

</DataTemplate>

<xcdg:ColumnManagerRow />

</DataTemplate>

</xcdg:TableflowView.FixedHeaders>

</xcdg:TableflowView>

</xcdg:DataGridControl.View>

Note: you only need to manually add the MergedColumnManagerRow(s) to the View if UseDefaultHeadersFooters is set to false (true by default).

In the XAML, we will need to add 1 MergedHeader for each MergedColumnManagerRow to be displayed. These are added to the DataGridControl.MergedHeaders collection.

Then, in each MergedHeader, we need to specify the list of MergedColumns that will be present in it. A MergedColumn is made of a list of ChildColumnNames, which indicates which Columns or MergedColumns (of the level displayed directly under it) it regroups.

<xcdg:DataGridControl.MergedHeaders>

<xcdg:MergedHeader>

<xcdg:MergedHeader.MergedColumns>

<xcdg:MergedColumn FieldName="Q1" Title="Quarter 1"

CellHorizontalContentAlignment="Center"

ChildColumnNames="JAN,FEB,MAR" />

<xcdg:MergedColumn FieldName="Q2" Title="Quarter 2"

CellHorizontalContentAlignment="Center"

ChildColumnNames="APR,MAY,JUN" />

</xcdg:MergedHeader.MergedColumns>

</xcdg:MergedHeader>

<xcdg:MergedHeader>

<xcdg:MergedHeader.MergedColumns>

<xcdg:MergedColumn FieldName="JAN" Title="January"

CellHorizontalContentAlignment="Center"

ChildColumnNames="JanIn,JanOut" />

<xcdg:MergedColumn FieldName="FEB" Title="February"

CellHorizontalContentAlignment="Center"

ChildColumnNames="FebIn,FebOut" />

<xcdg:MergedColumn FieldName="MAR" Title="March"

CellHorizontalContentAlignment="Center"

ChildColumnNames="MarIn,MarOut" />

<xcdg:MergedColumn FieldName="APR" Title="April"

CellHorizontalContentAlignment="Center"

ChildColumnNames="AprIn,AprOut" />

<xcdg:MergedColumn FieldName="MAY" Title="May"

CellHorizontalContentAlignment="Center"

ChildColumnNames="MayIn,MayOut" />

<xcdg:MergedColumn FieldName="JUN" Title="June"

CellHorizontalContentAlignment="Center"

ChildColumnNames="JunIn,JunOut" />

</xcdg:MergedHeader.MergedColumns>

</xcdg:MergedHeader>

</xcdg:DataGridControl.MergedHeaders>

Part 3: More

This section will be used to list additional information, and may be edited in the future if needed.

ColumnChooser: Each level has its own.

Grouping and Sorting: Only available on ColumnManagerCells.

FixedColumnSplitter: Only applied at the highest level, meaning at the top level MergedColumnManagerRow if any merged headers are present.

Re-ordering: A Column or MergedColumn can be moved from one MergedHeader to another. They can also be re-ordered within the same MergedHeader. This can be done either by drag & drop, by changing the VisiblePosition, or by manually changing the group. To manually change the group, you can either use the MoveMergedColumn method on the DataGrid, or set its Parent to null (to detach it) and then assign the new Parent.

If you have any questions or feedback, please send them to support@xceed.com.

Good Luck and Have Fun!

It's All About the StatRows Part 2 - Code Behind

Marc [Xceed] — Sat, 18 Feb 2012 21:13:00 GMT

Have you ever had that feeling that you couldn’t get enough of StatRows? Well if you haven’t had, then you will now. I’ve decided to write you a sequel on “It’s All About the StatRows” to bring you part 2 – Code Behind! I’ve noticed that there are more and more developers that are coding XAML in code behind. We all know how that feels because between bugs in .NET and the time spent doing this, it just does not seem to be a fun task. I wish this could be easier, but unfortunately it is not since you will need to store XAML in a string and then load it using XAMLReader.To avoid as much error as possible, code your XAML in XAML first so that you don't get any syntax errors when bringing into code behind. There won't be any beautiful red zig-zag lines in between quotations ("").

So for the first topic of the post, I wanted to spend time showing you how to implement this in code behind. Before, we get started; I forgot to mention that I have noticed that this question was asked many times. I know that it was asked on StackOverflow and on our forums a bunch of times. I feel that writing a blog about this and hopefully those looking for answers will come here.

Build it and they shall come!

Let’s clear the air here and make everyone understand that, creating instances of DataTemplates, assigning styles and adding them to the Resources collection just won’t work in code behind. We have tried time and time again, until we found out that there is a bug in the .NET framework. You can attack this in any way and it just won’t cut. The only way to do it is to write the XAML and store it in a string. Here is a basic example:

DataTemplate dt = (DataTemplate)XamlReader.Load(ms,pc);
dt.LoadContent();
return dt;
}

This is the simplest way to achieve exactly what you want. The XamlReader.Load will load the XAML the way it should and place it in a DataTemplate instance. You can then add the DataTemplate into the FixedFooters or the groups footers. Voila! Now you have a StatRow which has now become dynamic.

But what if we want to do more? Say, a CellContentTemplate for the StatCell? This is easy, but we still run into another issue. The ParserContext won’t recognize your local namespace. You can try, but you won’t succeed. So now what do we do? Our first step is to add the namespace into the DataTemplate in the XAML string variable. So let’s modify the above code.

string statRowTemplate = "<DataTemplate xmlns:local=\"clr-namespace:TestProject;assembly=TestProject\">";

That’s it!

Now we have to give our converter a name. To do this, we must do it in the Resources of the DataTemplate. Here is the modified code:

statRowTemplate += "<DataTemplate.Resources><local:StatCellConverter x:Key=\"myConverter\"/></DataTemplate.Resources>";

That’s it again!

And now we must code our DataTemplate so that we can provide it to the CellContentTemplate property of the StatCell. This is easy as well and does not require much effort. In the next piece of code, I had written a converter that took any values that were being divided by 0 and displaying an error message instead of “#DIV/0#”.

statRowTemplate += "<xcdg:StatCell.ContentTemplate>";
statRowTemplate += "<DataTemplate>";
statRowTemplate += "<TextBlock Text=\"{Binding ., Converter={StaticResource ResourceKey=myConverter}}\" />";
statRowTemplate += "</DataTemplate>";
statRowTemplate += "</xcdg:StatCell.ContentTemplate>";

So overall, this was not a difficult task at all. The only issue is that we must first recognize what works and what doesn’t. In an ideal world, we would want to do this in .NET code rather than storing XAML in code behind. But who said life was easy? So here is the final code up until now:

private DataTemplate GenerateStatRowDataTemplate()
{
ParserContext pc = new ParserContext();
pc.XmlnsDictionary.Add("", "http://schemas.microsoft.com/winfx/2006/xaml/presentation");
pc.XmlnsDictionary.Add("x", "http://schemas.microsoft.com/winfx/2006/xaml");
pc.XmlnsDictionary.Add("xcdg", "http://schemas.xceed.com/wpf/xaml/datagrid");

string statRowTemplate = "<DataTemplate xmlns:local=\"clr-namespace:TestProject;assembly=TestProject\">";
statRowTemplate += "<DataTemplate.Resources><local:StatCellConverter x:Key=\"myConverter\"/></DataTemplate.Resources>";
statRowTemplate+= "<xcdg:StatRow>";
statRowTemplate += "<xcdg:StatCell FieldName=\"Column4\" ResultPropertyName=\"AvgColumn4\">";
statRowTemplate += "<xcdg:StatCell.ContentTemplate>";
statRowTemplate += "<DataTemplate>";
statRowTemplate += "<TextBlock Text=\"{Binding ., Converter={StaticResource ResourceKey=myConverter}}\" />";
statRowTemplate += "</DataTemplate>";
statRowTemplate += "</xcdg:StatCell.ContentTemplate>";
statRowTemplate += "</xcdg:StatCell>";
statRowTemplate += "</xcdg:StatRow>";
statRowTemplate += "</DataTemplate>";

StringReader stringReader = new StringReader(statRowTemplate);
XmlReader xmlReader = XmlReader.Create(stringReader);
MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(statRowTemplate.ToString()));
DataTemplate dt = (DataTemplate)XamlReader.Load(ms,pc);
dt.LoadContent();
return dt;
}

This does conclude the post on It’s All About the StatRows Part 2 – Code Behind. This does not mean that it is the end of StatRows blogging, but, for now I believe I have covered the more popular questions and concerns about it. I shall return shortly, and hopefully bring you more wisdom to carry forth your development adventures. Before I end it, I just want to say Happy New Year and welcome to 2012! Xceed is always looking to make improvements and to bring you the best components. Just remember that those of us on the Tech Side of things, we support you! Thanks for reading. Marc – out.

It's All About the StatRows

Marc [Xceed] — Wed, 07 Dec 2011 21:29:00 GMT

Hey guys, in this topic, we will talk about StatRows. Yes that's right! I said StatRows. Although they are easy to implement, they can become tricky to play around with. In this lovely WPF world, we run into some unbelievable requests and features we need to implement with the DataGrid for WPF... I'm sure you all have other wonderful things to implement as well. From time to time, we get different questions about StatRows but there are always some that stick out like a sore thumb. And it is the sore thumbs that we want to fix since we well... don't want them to be sore again!

For my first part about StatRows, I want to talk about adding statistical functions to the GroupHeaderControl. This has become a popular topic where developers wish to have StatCells displayed in the GroupHeaderControl rather than the footers of the groups. Although there will have to be a sacrifice to give up the original look of the GroupHeaderControl, it can be done. The one thing to remember is that we are adding a StatRow with StatCells in them. In order to get fast and efficient results, we need to use them. This helps developers avoid coding exhaustive loops in a Converter that will return a string which will then be bound to the Text property of a TextBlock which in turn will be part of the GroupHeaderControl template

The first step would be to create a Style which targets the GroupHeaderControl. We will be changing the Template of the control to our own ControlTemplate which will be a Grid with a StatRow in there. So let's get the code ready so we can use it!

<Style x:Key="groupHeaderAndStatRowStyle"

TargetType="{x:Type xcdg:GroupHeaderControl}">

<Setter Property="xcdg:TableView.CanScrollHorizontally"

Value="True" />

<Setter Property="Background"

Value="White" />

<Setter.Value>

<Grid>

<xcdg:StatRow x:Name="statRow"

Background="{TemplateBinding Background}">

<xcdg:StatCell FieldName="PreviousClose"

ResultPropertyName="PreviousCloseAverage" />

<xcdg:StatCell FieldName="Open"

ResultPropertyName="OpenAverage" />

<xcdg:StatCell FieldName="Change"

ResultPropertyName="ChangeAverage" />

<xcdg:StatCell FieldName="ChangeDiff"

ResultPropertyName="ChangeDiffAverage" />

<xcdg:StatCell FieldName="LastTrade"

ResultPropertyName="LastTradeAverage" />

<xcdg:StatCell FieldName="LastTradeDiff"

ResultPropertyName="LastTradeDiffAverage" />

</xcdg:StatRow>

<!-- In the original GroupHeaderControl template, the GroupHeaderControl

itself was not scrolling horizontally, now only its content should

not scroll to allow the StatRow to correctly scroll -->

<xcdg:PassiveLayoutDecorator Axis="Horizontal"

xcdg:TableView.CanScrollHorizontally="False">

<xcdg:HierarchicalGroupLevelIndicatorPane DockPanel.Dock="Left" />

<xcdg:GroupLevelIndicatorPane DockPanel.Dock="Left"

Indented="False"

xcdg:GroupLevelIndicatorPane.GroupLevel="{Binding

RelativeSource={RelativeSource TemplatedParent},

Path=(xcdg:GroupLevelIndicatorPane.GroupLevel),

Converter={StaticResource

groupHeaderControlGroupLevelConverter},

ConverterParameter=-1}" />

<Border x:Name="mainBorder"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Padding="{TemplateBinding Padding}"

Focusable="True"

FocusVisualStyle="{TemplateBinding FocusVisualStyle}">

<Border.InputBindings>

<KeyBinding Command="{x:Static xcdg:DataGridCommands.ToggleGroupExpansion}"

Key="Space" />

<KeyBinding Command="{x:Static xcdg:DataGridCommands.ExpandGroup}"

Key="Right" />

<KeyBinding Command="{x:Static xcdg:DataGridCommands.ExpandGroup}"

Key="Add" />

<KeyBinding Command="{x:Static xcdg:DataGridCommands.CollapseGroup}"

Key="Left" />

<KeyBinding Command="{x:Static xcdg:DataGridCommands.CollapseGroup}"

Key="Subtract" />

<MouseBinding

Command="{x:Static xcdg:DataGridCommands.ToggleGroupExpansion}"

MouseAction="LeftDoubleClick" />

</Border.InputBindings>

<ToggleButton DockPanel.Dock="Left"

OverridesDefaultStyle="True"

Template="{StaticResource groupExpanderToggleButtonTemplate}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Focusable="False"

IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Group.IsExpanded}" />

<!-- Replaced Margin by Padding to ensure the border is all over the

StatRow and clips the displayed values correctly -->

<Border Background="{TemplateBinding Background}"

DockPanel.Dock="Left"

Padding="3,0,0,0">

<ContentPresenter Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

ContentTemplateSelector="{TemplateBinding

ContentTemplateSelector}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

HorizontalAlignment="Left" />

</Border>

</DockPanel>

</Border>

</DockPanel>

</xcdg:PassiveLayoutDecorator>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="xcdg:DataGridControl.NavigationBehavior"

Value="None">

<Setter TargetName="mainBorder"

Property="Focusable"

Value="False" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

I had just wanted to mention that along with the StatRows being in the ControlTemplate, we are simply redoing the ControlTemplate of the GroupHeaderControl. Jenny (those of you who don't know her, she writes the "Don't Panic" Blog on our website) had posted a sample application that shows you how to achieve this. Everything but the StatRow elements in the above XAML was just copy/pasted from our templates for the GroupHeaderControl.

So far, this has been a great start where we now know how to add statistical functions to the GroupHeaderControl. So this brings me to my next and last topic (for this blog) about StatRows... Building custom statistical functions.

One interesting and popular statistic that developers usually seek is to display the average for a Column which has a TimeSpan data type. This is just a scenario that I picked, which I found became popular, but again, you can use this for any scenario where you need an average. If the AverageFunction is not sufficient enough for you, possibly because you have a certain data type where you wish to calculate it in another way, you can certainly use this as a reference.

The first thing we must do is create our own class, let's say ‘DurationAvgFunction' for simplicity. We must inherit from StatFunction and override the following members:

- void Reset()

- void Accumulate(object[] values) - leave blank since we will be using Prerequisites

- bool RequiresAccumulation - return False since we will be using Prerequisites

- StatFunctions[] PrerequisiteFunctions - ReadOnly

- void InitializePrerequisites(StatResult[] prerequisiteValues)

- StatResult GetResult()

The PrerequisiteFunctions property is extremely important and which it will require us to return an array with a Length of 2. The array will contain the sum of the duration (using our very own DurationSumFunction) as well as the count (the number of items required to calculate the average). We will return the value of a StatFunction array so later on we can extract the two values (sum and count).

protected override StatFunction[] PrerequisiteFunctions

{

get

{

StatFunction[] prerequisites = m_prerequisites;

if (prerequisites == null)

{

prerequisites = new StatFunction[]

{

new DurationSumFunction( "DurationAvgFunction.Sum", this.SourcePropertyName ),

new CountFunction( "DurationAvgFunction.Count", this.SourcePropertyName )

};

if (this.IsSealed)

{

m_prerequisites = prerequisites;

}

return prerequisites;

}

In the InitializePrerequisites method, we will just initialize 2 local variables which will hold the values of the sum and count function.

protected override void InitializePrerequisites(StatResult[] prerequisiteValues)

{

if (prerequisiteValues.Length != 2)

{

throw new InvalidOperationException("The prerequisites initializers do not match the PrerequisiteFunctions");

}

else

{

durationSum = (TimeSpan)prerequisiteValues[0].Value;

durationCount = (long)prerequisiteValues[1].Value;

}

The next important piece is the GetResult function which will return the StatResult. All we need to do here is to return the Average (sum / count) as a StatResult.

protected override StatResult GetResult()

{

TimeSpan durationAvg = new TimeSpan();

if (durationCount != null && durationSum != null)

{

if ((long)durationCount > 0)

{

durationAvg = TimeSpan.FromSeconds(((TimeSpan)durationSum).TotalSeconds / (long)durationCount);

}

return new StatResult(durationAvg);

}

As we always do, here are the links to the sample applications that I used to test the above code. Didn't think I could actually do this with my eyes closed did you?

Prerequisite Functions

StatRow in GroupHeaderControl

I hope you enjoyed this one, but if you haven't, then I hope it helped you in some way. I will conclude this post by saying "thank you!" to all the readers and for your support! Marc - out.

Adding a "Select All" button the AutoFilterControl

Michel [Xceed] — Tue, 08 Nov 2011 18:19:00 GMT

A question we've had quite a few times is how to add a “select-all” button to the AutoFilterControl along with the "Clear All" button to have something that mimics Excel's filtering.

The steps to do this are:

Create an explicit style that targets AutoFilterControl and sets the Template property.
Change the template basing it on our default AutoFilterControl template found in the themes folder of the DataGridControl's installation folder.
Add the “select-all” button and handle its Click event in order to add the custom logic that selects all the AutoFilterValues of that column by adding all the distinct values to the AutoFilterValues.
Apply this style to all the columns by setting it to the AutoFilterControlStyle that property of the columns that you want to have the "select-all" button. Note that if your collection has a larger number of distinct items, the “select-all” procedure might freeze the UI for a while until the AutoFilterValues are all populated. We can however increase the performance by using DeferINotifyCollectionChanged on the AutoFilterValues.

This is the style:

<Setter.Value>

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button Content=“select-all”

Click="OnAutoFilterSelectClearAllClick"

Grid.Row="0"

MinHeight="24"

Tag="1"/>

<Button Content="Clear All"

Click="OnAutoFilterSelectClearAllClick"

Grid.Row="1"

MinHeight="24"

Tag="0"/>

<ListBox Name="PART_DistinctValuesHost"

Background="{TemplateBinding Background}"

BorderThickness="0"

Foreground="{TemplateBinding Foreground}"

Grid.Row="2"

ItemTemplate="{TemplateBinding DistinctValueItemTemplate}"

ItemTemplateSelector="{TemplateBinding DistinctValueItemTemplateSelector}"

ItemContainerStyle="{TemplateBinding DistinctValueItemContainerStyle}"

ItemContainerStyleSelector="{TemplateBinding DistinctValueItemContainerStyleSelector}"

MaxHeight="350"

SelectionMode="Multiple"

ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Applying the style to all the columns:

myGrid.ItemsSourceChangeCompleted += new EventHandler( myGrid_ItemsSourceChangeCompleted );

void myGrid_ItemsSourceChangeCompleted( object sender, EventArgs e )

{

foreach( var col in myGrid.Columns )

col.AutoFilterControlStyle = ( Style )FindResource( "PART_AutoFilterControlStyle" );

}

Handling the click event of the “select-all” button:

private void OnAutoFilterSelectClearAllClick( object sender, RoutedEventArgs e )

{

DataGridCollectionView dataGridCollectionView = ( DataGridCollectionView )myGrid.ItemsSource;

if( dataGridCollectionView != null )

{

int filters = 0;

System.Windows.Controls.Button button = ( System.Windows.Controls.Button )sender;

AutoFilterControl autoFilterControl = button.TemplatedParent as AutoFilterControl;

string columnFieldName = autoFilterControl.AutoFilterColumn.FieldName;

bool selectAll = ( ( string )button.Tag ) == "1";

using( dataGridCollectionView.DeferRefresh() )

{

ObservableHashList autoFilterValues = dataGridCollectionView.AutoFilterValues[ columnFieldName ] as ObservableHashList;

using( autoFilterValues.DeferINotifyCollectionChanged() )

{

autoFilterValues.Clear();

if( selectAll )

{

IList distinctValues = dataGridCollectionView.DistinctValues[ columnFieldName ];

foreach( object value in distinctValues )

autoFilterValues.Add( value );

filters += distinctValues.Count;

}

if( selectAll )

{

ListBox listBox = autoFilterControl.DistinctValuesHost as ListBox;

listBox.SelectAll();

}

And that’s about it! You can download a sample application HERE !

How To Add Excel Like Selection of DataCells In Xceed DataGridControl

Michel [Xceed] — Wed, 28 Sep 2011 00:45:00 GMT

Recently, we had a question here at technical support asking if we had "Excel Like Selection of DataCells".

Well... we don't! When SelectionUnit is set to Cell on DataGridControl it is possible to make your selection on a cell-by-cell basis and to select multiple cells at once by Shift Clicking but still, that is not what some clients expect, especially if they are used to an Excel-like selection. That is, clicking on one cell, holding down the mouse key and as you move the mouse around, the cells in the rectangle formed by the clicked cell and the current location of the mouse should dynamically become selected and the content should scroll as you move your mouse to the edges of the DataGridControl .

But of course, nothing is impossible! This behavior can be achieved but it requires a little extra work.

This post will show how to customize the DataGridControl in order to add this functionality. The demo application is provided below.

First thing we need to do is to create a custom DataGridControl, in this post I will name my class ExelSelectionDataGrid which inherits from DataGridControl.

We will keep a reference to the first clicked cell and the cell that lies under the mouse as the mouse moves. We will then dynamically calculate and add the ranges of cells that lie in the rectangle bounded by the first clicked cell and the cell beneath the mouse to the SelectedCellRanges collection of the datagrid instance.

For that, we would need to override the following:

OnPreviewMouseLeftButtonDown In order to get the keep track of the first clicked cell

OnPreviewMouseMove where we get the cell that is currently under the mouse, find the ranges between the first cell and the current cell and update the selected ranges, and finally scroll the DataGridControl if we are close to any of the edges if possible.

OnPreviewMouseLeftButtonUp only to set our selection flag to false.

Getting the cell under the mouse can easily be acheived by using the VisualTreeHelperClass. This is how I used it:

private DataCell getDataCellUnderMouse(MouseEventArgs e)

{

HitTestResult result = VisualTreeHelper.HitTest(this, e.MouseDevice.GetPosition(this));

DependencyObject obj = result.VisualHit;

var ctype = typeof(DataCell);

if (obj != null)

{

var otype = obj.GetType();

while (obj != null && (obj as DataCell) == null)

{

obj = VisualTreeHelper.GetParent(obj);

}

return obj as DataCell;

}

Manually scrolling the datagrid would require access to the scroll viewer, this can be reached through the following:

ScrollViewer sv = (ScrollViewer)this.Template.FindName("PART_ScrollViewer", this);

So this is the entire class:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using Xceed.Wpf.DataGrid;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

using System.Diagnostics;

using System.Windows.Media;

using Xceed.Wpf.DataGrid.Views;

namespace ExcelLikeSelectionDataGrid

{

class ExelSelectionDataGrid : DataGridControl

{

public ExelSelectionDataGrid()

{

this.Loaded += new RoutedEventHandler(CustomDataGridControl_Loaded);

}

void CustomDataGridControl_Loaded(object sender, RoutedEventArgs e)

{

sv = (ScrollViewer)this.Template.FindName("PART_ScrollViewer", this);

}

ScrollViewer sv;

int firstItemIndex;

int secondItemIndex;

int firstColumnIndex;

int secondColumnIndex;

protected override void OnPreviewMouseMove(MouseEventArgs e)

{

base.OnPreviewMouseMove(e);

if (isSelecting)

{

DataCell cellUnderMouse = getDataCellUnderMouse(e);

if (cellUnderMouse != null)

{

int columnIndex = this.Columns[cellUnderMouse.FieldName].VisiblePosition;

int itemIndex = this.Items.IndexOf(cellUnderMouse.DataContext);

if ((columnIndex != secondColumnIndex || itemIndex != secondItemIndex) && columnIndex >= 0 && itemIndex >= 0)

{

secondColumnIndex = columnIndex;

secondItemIndex = itemIndex;

UpdateSelection();

}

Point mousePosition = Mouse.GetPosition(this);

if (mousePosition.Y > (this.ActualHeight - 10))

{

double calculatedVerticalOffset = sv.VerticalOffset + 3 * (this.View as TableflowView).ContainerHeight;

sv.ScrollToVerticalOffset(calculatedVerticalOffset);

}

if (mousePosition.X > (this.ActualWidth - 10))

{

double calculatedHorizontalOffset = sv.HorizontalOffset + 3 * 50.0;

sv.ScrollToHorizontalOffset(calculatedHorizontalOffset);

}

if (mousePosition.Y < (10))

{

double calculatedVerticalOffset = sv.VerticalOffset - 3 * (this.View as TableflowView).ContainerHeight;

sv.ScrollToVerticalOffset(calculatedVerticalOffset);

}

if (mousePosition.X < 10)

{

double calculatedHorizontalOffset = sv.HorizontalOffset - 3 * 50.0;

sv.ScrollToHorizontalOffset(calculatedHorizontalOffset);

}

protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)

{

base.OnPreviewMouseRightButtonDown(e);

DataCell clickedCell = getDataCellUnderMouse(e);

if (clickedCell != null)

{

isSelecting = true;

firstColumnIndex = this.Columns[clickedCell.FieldName].VisiblePosition;

firstItemIndex = this.Items.IndexOf(clickedCell.DataContext);

}

protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e)

{

isSelecting = false;

}

private void UpdateSelection()

{

if (!(Keyboard.Modifiers == ModifierKeys.Shift))

this.SelectedCellRanges.Clear();

this.SelectedCellRanges.Add(new SelectionCellRange(firstItemIndex, firstColumnIndex, secondItemIndex, secondColumnIndex));

}

bool isSelecting = false;

private DataCell getDataCellUnderMouse(MouseEventArgs e)

{

HitTestResult result = VisualTreeHelper.HitTest(this, e.MouseDevice.GetPosition(this));

DependencyObject obj = result.VisualHit;

var ctype = typeof(DataCell);

if (obj != null)

{

var otype = obj.GetType();

while (obj != null && (obj as DataCell) == null)

{

obj = VisualTreeHelper.GetParent(obj);

}

return obj as DataCell;

}

I will not go through the code details here. It should be straightforward to understand once you look at it. You can download a sample application here.

Please, add your comments and suggestions below. Let me know if you find a better way to acheive this or if you find any bugs in my code ;)

How to Lookup on Data Virtualization

Marc [Xceed] — Mon, 11 Jul 2011 19:37:00 GMT

Hi! My name is Marc and I work in the technical support department here at Xceed. My main focus is to help those seeking help and give developers something exciting to read about. Since data virtualization is plenty to get excited about, let’s start there.

We all try to understand exactly what is going on in the “Data Virtualization” world and try to grasp its intentions; however, we sometimes need to sit back and take a look at what our possibilities are. What if we can go beyond that and try to cheat a little (as long as no one gets hurt)? Being from technical support and noticing that the same questions are often asked. How can something that seems so trivial be so complicated? Usually getting selected items is easy to achieve by simply accessing a property of a control. If you have tried to access the SelectedItems property from the DataGridControl when using data virtualization, you now know that an exception will be thrown stating that the operation is not supported. This happens when the number of SelectedItems exceeds the PageSize because these records aren’t loaded into memory yet, and the ones that were, well, they’re gone anyways since I scrolled down.

But not to worry, there are workarounds! This actually became a common question, especially when you want to allow deletion of multiple rows. So today I thought I would create this post in hopes of answering some of your questions.

Like I mentionned before, I will go ahead and explain how to delete multiple rows, although this workaround can apply to various other scenarios.

So to make things a little clearer, we will begin by creating a class called VirtualizationHelper. And from here on out, we will use this class to process any lookups that need to be done.

public class VirtualizationHelper<T>
where T : class
{

    private static List<int> OrderSelectionRangesIndexes( IList<SelectionRange> selectedItemRanges )
    {
      List<int> indexes = new List<int>();

      foreach( var selectionRange in selectedItemRanges )
      {
        for( int i = selectionRange.StartIndex; i <= selectionRange.EndIndex; i++ )
      {
          indexes.Add( i );
        }
      }

return ( from i in indexes orderby i select i ).ToList<int>();
}

    public VirtualizationHelper( DataGridControl dataGridControl )
    {
      if( typeof( T ) == typeof( object ) )
        throw new InvalidOperationException();

m_dataGridControl = dataGridControl;
}

    public void ProcessSelectionLookUp()
    {
      if( m_orderedSelectionIndexes != null )
        throw new InvalidOperationException();

var indexes = VirtualizationHelper<T>.OrderSelectionRangesIndexes( m_dataGridControl.SelectedItemRanges );

if( indexes.Count() == 0 )
return;

m_orderedSelectionIndexes = indexes;

INotifyCollectionChanged notifyCollectionChanged = m_dataGridControl.Items as INotifyCollectionChanged;

      notifyCollectionChanged.CollectionChanged += ( sender, args ) =>
        {
          if( args.Action == NotifyCollectionChangedAction.Replace )
          {
            if( ( m_selectedIndexWaitingForRealizedItem != -1 ) && ( m_selectedIndexWaitingForRealizedItem == args.OldStartingIndex ) )
            {
              m_selectedIndexWaitingForRealizedItem = -1;

              m_dataGridControl.Dispatcher.BeginInvoke( new Action( () => this.ProcessSelectionLookUpCore() ) );
            }
          }
        };

this.ProcessSelectionLookUpCore();
}

public event EventHandler<LookUpEventArgs<T>> SelectedItemLookUp;
public event EventHandler SelectedItemLookUpCompleted;

    private void ProcessSelectionLookUpCore()
    {
      if( m_orderedSelectionIndexes == null )
        throw new InvalidOperationException();

      while( m_orderedSelectionIndexes.Count > 0 )
      {
        int globalIndex = m_orderedSelectionIndexes.Last();
        T item = m_dataGridControl.Items[ globalIndex ] as T;

        if( item == null )
        {
          // Item not yet realized.
          m_selectedIndexWaitingForRealizedItem = globalIndex;

return;
}

        // Item is realized
        this.OnSelectedItemLookUp( item, globalIndex );
        m_orderedSelectionIndexes.Remove( globalIndex );
      }

this.OnSelectedItemLookUpCompleted();

return;
}

    private void OnSelectedItemLookUp( T item, int globalIndex )
    {
      if( this.SelectedItemLookUp != null )
        this.SelectedItemLookUp( this, new LookUpEventArgs<T>( item, globalIndex ) );
    }

    private void OnSelectedItemLookUpCompleted()
    {
      if( this.SelectedItemLookUpCompleted != null )
        this.SelectedItemLookUpCompleted( this, EventArgs.Empty );

// The whole lookup of all the selected items is completed.

m_orderedSelectionIndexes = null;

m_selectedIndexWaitingForRealizedItem = -1;

var collectionView = m_dataGridControl.ItemsSource as ICollectionView;

collectionView.Refresh();

m_dataGridControl = null;
}

    private List<int> m_orderedSelectionIndexes = null;
    private int m_selectedIndexWaitingForRealizedItem = -1;
    private DataGridControl m_dataGridControl;
  }

  public class LookUpEventArgs<T> : EventArgs
    where T : class
  {
    public LookUpEventArgs( T item, int globalIndex )
    {
      this.Item = item;
      this.GlobalIndex = globalIndex;
    }

public T Item { get; private set; }
public int GlobalIndex { get; private set; }
}

Now we can send in our DataGridControl and get the SelectedItems we need. Even though this does defeat the whole purpose of data virtualization, there are those who may want to do something with those records that are not in memory yet. Now back to business… So we have this class, but how do we use it? The next part is pretty simple since the helper class does all the work for you, but you still have to call the appropriate methods.

In your code behind, handle the DeletingSelectedItems event and use the helper class from there.

void dataGridControl1_DeletingSelectedItems( object sender, CancelRoutedEventArgs e )
{
e.Cancel = true;

this.DeleteSelectedItems();

var collectionView = dataGridControl1.ItemsSource as ICollectionView;

collectionView.Refresh();

dataGridControl1.IsEnabled = true;
}

private void DeleteSelectedItems()
{
dataGridControl1.IsEnabled = false;

var helper = new VirtualizationHelper<Record>( dataGridControl1 );

   helper.SelectedItemLookUp += ( sender, args ) =>
   {
      myBusinessObjectCollection.Remove( args.Item.Index );
   };

   helper.SelectedItemLookUpCompleted += ( sender, args ) =>
   {
      dataGridControl1.SelectedItemRanges.Clear();
        dataGridControl1.IsEnabled = true;
   };

helper.ProcessSelectionLookUp();
}

So once we have deleted whatever we had to, we need to refresh the CollectionView so that the DataGridControl can reflect the changes that have been made.

One issue to keep in mind is that the above solution deletes when a user selects DataRows from top to bottom. If you are looking to implement a delete capability, please remember that you need to handle selection as well as selecting DataRows from bottom to top (user clicks on the 100th record and holds the Shift key and clicks on the 25th record). If it is not handled, the DataGrid won’t delete those items. It is important to think of everything that the user can do.

I will conclude this post by saying "thank you!" to all the readers and for your support! Marc - out.

DataCell Styling vs CellContentTemplate

Michel [Xceed] — Wed, 06 Jul 2011 18:04:00 GMT

For this blog post from The Tech Side, I will be addressing a few queries that are very common when it comes to styling the DataCells and changing a Column's CellContentTemplate.

I will demonstrate this by answering the following question: If I have 2 cells, how do I color their backgrounds depending on their values?

Using the following criteria, this was my first try:

If A < B then B's background is GREEN and A's background is RED
If A > B then A's background is GREEN and B's background is RED

<Style.Triggers >

<MultiDataTrigger.Conditions>

</MultiDataTrigger.Conditions>

</MultiDataTrigger>

<MultiDataTrigger.Conditions>

</MultiDataTrigger.Conditions>

</MultiDataTrigger>

<MultiDataTrigger.Conditions>

</MultiDataTrigger.Conditions>

</MultiDataTrigger>

<MultiDataTrigger.Conditions>

</MultiDataTrigger.Conditions>

</MultiDataTrigger>

</Style.Triggers>

</Style>

public class CompareColorConverter : IValueConverter
{

   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      MyEntity c = value as MyEntity;

      if (c!=null)
      {
         return c.FieldA < c.FieldB ? "less" : "more";
       }

return null;
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{

string strValue = value as string;

DateTime resultDateTime;

       if (DateTime.TryParse(strValue, out resultDateTime))
       {
        return resultDateTime;
       }

return DependencyProperty.UnsetValue;
}
}

So we have a Style that targets DataCell and uses a MultiDataTrigger with two conditions, one on the FieldName of the ParentColumn of the DataCell and the other on the DataContext of the ParentRow of the DataCell with a Converter that returns the string "less" if A is less than B and "more" if it's not. This works, the cell with the higher value between FieldA and FieldB has a red background and the other has a green background. Great! but wait... try changing the values of the cells. Notice that the colors do not update with any further changes. Why is that!? Well, it's simple, take a look at this line:

The binding in this condition is on DataContext of the ParentRow, which is the business object itself, and changing the value for its properties—FieldA or FieldB—would not cause any notifications for the DataContext and hence the compareColorConverter will not recalculate the value of the binding. So, this solution is only good if you know that the values for the fields are never going to be updated.

For more information about how notifications work you can check Jenny's blog post here!

So with this new information, here is my second try:

<Style TargetType="{x:Type xcdg:DataCell}">
  <Setter Property="Background">
   <Setter.Value>
    <MultiBinding Converter="{StaticResource multiValueColorConverter}">
     <Binding RelativeSource="{RelativeSource Self}" Path="ParentColumn.FieldName"/>
     <Binding RelativeSource="{RelativeSource FindAncestor,
 AncestorType={x:Type xcdg:DataRow},AncestorLevel=1}" Path="DataContext.FieldA"/>
     <Binding RelativeSource="{RelativeSource FindAncestor,
 AncestorType={x:Type xcdg:DataRow},AncestorLevel=1}" Path="DataContext.FieldB"/>
    </MultiBinding>
   </Setter.Value>
   </Setter>
</Style>

public class MultiValueColorConverter : IMultiValueConverter
{

IMultiValueConverter Members

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
       Brush green = Brushes.Green;
       Brush red = Brushes.Red;
       String fieldName = values[0] as string;
       int? fieldA = values[1] as int?;
       int? fieldB = values[2] as int?;

       if (fieldA != null && fieldB != null)
       {
          if (fieldName.Equals("FieldA"))
          {
             if (fieldA < fieldB)
               return red;

           return green;
          }
          else if (fieldName.Equals("FieldB"))
          {
             if (fieldA < fieldB)
                return green;

             return red;
          }
       }

       return null;
   }

   public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
   {
      throw new NotImplementedException();
   }
}

In this case, we also have a Style that targets DataCell, we use a MultiBinding to set the Value of the DataCell's Background property. The MultiBinding binds on the FieldName, the value of FieldA and the value of FieldB. The MultiValueConverter returns either a Green or a Red brush depending on the values of FieldA and FieldB and the FieldName passed to the converter. This does work even when you change the values of FieldA and FieldB at runtime, this is mainly because the binding binds directly to "FieldA" and "FieldB" properties directly and any changes would directly be notified and the converter would recalculate the binding.

And just for the fun of it, this is a third way to do this but this time through the CellContentTemplate property of the Column.

<xcdg:DataGridControl.Columns>
   <xcdg:Column FieldName="FieldA">
      <xcdg:Column.CellContentTemplate>
         <DataTemplate>
             <TextBlock Text="{Binding}">
             <TextBlock.Background>
                <MultiBinding Converter="{StaticResource compareColorConverter}"
 ConverterParameter='FieldA'>
                   <Binding Path="." />
                   <Binding RelativeSource="{RelativeSource FindAncestor,
 AncestorType={x:Type xcdg:Cell}}" Path="DataContext.FieldB" />
                </MultiBinding>
            </TextBlock.Background>
         </TextBlock>
      </DataTemplate>
   </xcdg:Column.CellContentTemplate>
</xcdg:Column>

<xcdg:Column FieldName="FieldB">
    <xcdg:Column.CellContentTemplate>
       <DataTemplate>
          <TextBlock Text="{Binding}">
             <TextBlock.Background>
                <MultiBinding Converter="{StaticResource compareColorConverter}"
, ConverterParameter='FieldB'>
                   <Binding RelativeSource="{RelativeSource FindAncestor, 
AncestorType={x:Type xcdg:Cell}}", Path="DataContext.FieldA" />
                   <Binding Path="." />
                </MultiBinding>
             </TextBlock.Background>
          </TextBlock>
      </DataTemplate>
   </xcdg:Column.CellContentTemplate>
 </xcdg:Column>
</xcdg:DataGridControl.Columns>

You can download the source code for the previous three samples by clicking here.

DataGrid Grouping Tricks

Michel [Xceed] — Mon, 13 Jun 2011 15:30:00 GMT

This is my first blog at Xceed! So I will keep it simple.... promise!

This will be the first out of a series of blogs that will be posted by our support staff under the name The Tech Side. The purpose of these blogs is to demonstrate how to achieve tasks that are commonly asked by our clients.

In this post from The Tech Side, I will show how to do a few tricks in Xceed DataGrid for WPF's grouping mechanism by answering the following recurring questions:

How do I flatten and unflatten groups?
How can I automatically hide/unhide columns when they are grouped/ungrouped?
How can I prevent my end users from ungrouping a certain column while still allowing grouping and ungrouping of others?

1- How do I flatten and unflatten groups?

This is the simplest of all, and is often missed by many.

You can simply set the AreGroupsFlattened property to true or false on the DataGridControl's view and, as the name implies, setting it to true would flatten the groups while setting it to false would well, unflatten them. Here is the xaml code:

<xcdg:DataGridControl Name="grid1"
                                         ItemsSource="{Binding Source={StaticResource techSource1}}">
   <xcdg:DataGridControl.View>
      <xcdg:TableflowView AreGroupsFlattened="True"/>
   </xcdg:DataGridControl.View>
</xcdg:DataGridControl>

And to toggle the AreGroupsFlattened from code behind, you can do the following:

TableflowView view = grid1.View as TableflowView;
view.AreGroupsFlattened = !view.AreGroupsFlattened;

2- How can I automatically hide/unhide columns when they are grouped/ungrouped?

For this one, you need to handle the CollectionChanged event of the GroupDescriptions property and change the corresponding column's Visible property. Here's an example:

grid2.ItemsSourceChangeCompleted += new EventHandler(grid2_ItemsSourceChangeCompleted);

void grid2_ItemsSourceChangeCompleted(object sender, EventArgs e)
{
DataGridCollectionView v ;

v = (DataGridCollectionView)grid2.ItemsSource;
v.GroupDescriptions.CollectionChanged += new NotifyCollectionChangedEventHandler(c_CollectionChanged);
}

void c_CollectionChanged ( object sender, NotifyCollectionChangedEventArgs e)
{
   if (e.Action == NotifyCollectionChangedAction.Remove)
   {
      string fieldName =((DataGridGroupDescription)e.OldItems[0]). PropertyName;
      grid2.Columns[fieldName ].Visible = true;
   }
   else
   {
      string fieldName =((DataGridGroupDescription)e.NewItems[0]). PropertyName;
      grid2.Columns[fieldName ].Visible = false;
   }
}

The reason why we handle ItemsSourceChangeCompleted first is because we are sure that after that event, the GroupDescriptions are initialized and that's where we handle the GroupDescriptions.CollectionChanged event.

3- How can I prevent my end users from ungrouping a certain column while still allowing grouping and ungrouping of others?

This one is a bit tricky, but after a few trials and errors, I was able to get it done, and in fact, the answer was pretty simple;

This can be achieved by handling the PreviewMouseMove event on GroupByItem. In the handler, I simply check if the GroupByItem is being dragged, and if its field name corresponds to the column that I want to be un-groupable. If the 2 conditions where satisfied I simply set e.Handled = true on the event and that disables un-grouping of that column! Here's an example:

void g_PreviewMouseMove(object sender, MouseEventArgs e)
{
GroupLevelDescription gld = (GroupLevelDescription)(sender as GroupByItem).Content;

if ((sender as GroupByItem).IsBeingDragged && gld.FieldName == "Name")
e.Handled = true;
}

You can download the source code for the previous examples here, and don't forget to leave your comments and suggestions for future blog posts in the comments section below!

Michel

Which Zip Component Is Right For You?

Jenny [Xceed] — Fri, 10 Jun 2011 17:18:00 GMT

Amid the multiple flavors of zip/compression components offered by Xceed, it can be confusing to some as to which one is the right one for a project.

A simple way to eliminate a couple of options is to start with the targeted platform.

*via a .NET wrapper automatically generated by Visual Studio. Application must target x86.
**Although the component has been tested in MONO, it is not officially supported by technical support staff

Already the list is narrowed down to 1-3 products per development framework, which should make the decision much easier. For example, only Xceed Real-Time Zip for Silverlight can be used in Silverlight; therefore, if you are creating a Silverlight project that requires zip compression, Xceed Real-Time Zip for Silverlight is the product you wanted to be looking at.

At this point, since we have already narrowed down which product can be used with which development framework, we can narrow the list down even further by determining what features the product must have.

1- When reading sequentially until item is reached.
2- Slow
3- PPMd not supported

Although the above table provides a detailed view of the major features, it is far from being complete. The extensive list of features for each product can be found in each product’s respective documentation, or online at the following locations:

Xceed Real-Time Zip for .NET
Xceed Zip for .NET
Xceed Zip for .NET w/SFX Module
Xceed Real-Time Zip for .NET Compact Framework
Xceed Zip for .NET Compact Framework
Xceed Real-Time Zip for Silverlight
Xceed Streaming Compression Library
Xceed Zip Compression Library
Xceed Zip for x64

Using Xceed DataGrid for Silverlight in SharePoint 2010

Odi [Xceed] — Thu, 16 Dec 2010 18:46:00 GMT

This is a guest blog post written by Johnny Tordgeman from Guardian Information Systems. He has his own blog, check it out.

---

Hey everyone, my name is Johnny Tordgeman and I will be posting some guest posts here on SharePoint 2010 integration with Xceed DataGrid for Silverlight. I would like to thank Odi for giving me the opportunity to show everyone how easy it is to combine Xceed DataGrid for Silverlight with the SharePoint 2010 platform.

In this first post I’m going to show the basic connection of a SharePoint list with the datagrid by building a simple web part that will show all the fields of the default Tasks list using Xceed’s datagrid.

To keep things simple, I will only concentrate on the Silverlight portion for this web part and display it using SharePoint’s Silverlight web part, but on a later post we will add a custom web part to render our Silverlight application and pass parameters such as the list we want to show from SharePoint.

[Ed. note: If you are going to try to run the Silverlight web part on your development machine, see the note at the end of this post]

To get started, create a new Silverlight project and name it SLSPDataGrid then uncheck the “Host the Silverlight application in a new Web site” box and click OK.

To make this example as simple as possible we will use SharePoint’s REST web service to get the data from our Tasks list.

Right click on the project name and select “Add Service Reference”. You will get the following screen:

In the address box type in the address of your SharePoint site and add "/_vti_bin/ListData.svc" to it.

For example, if your site is http://jtordgeman the address box should read: http://jtordgeman/_vti_bin/ListData.svc. [Ed. note: If you have trouble accessing this .svc file, see this solution: http://blog.hompus.nl/2010/03/26/could-not-load-type-idataserviceupdateprovider-when-using-rest-with-sharepoint-2010/]

Change the namespace to SharePointContext and click OK.

Next, let’s add the Xceed datagrid dll to our project. Right click on "References" and choose "Add Reference", then click on “Browse” tab and navigate to where Xceed is installed. Click on "Bin" and then add "Xceed.Silverlight.DataGrid.v1.0.dll".

Your solution should look similar to this:

In MainPage.xaml add the following line to the UserControl declaration:

xmlns:sldg="http://schemas.xceed.com/silverlight/xaml/datagrid"

Now add the control under LayoutRoot using the sldg namespace. Your MainPage.xaml file should look like this:

We have added the control to our UI layer, so all we need now is to set its data. Switch to MainPage.xaml.cs file and following using statements:

using System.Data.Services.Client;
using SLSPDataGrid.SharePointContext;

Inside the MainPage constructor register the Loaded event by typing the following line under InitializeComponent():

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

Finally, type the following method to your code:

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
SharePointContext.HomeDataContext _context = new SharePointContext.HomeDataContext(new Uri("http://jtordgeman/_vti_bin/ListData.svc/", UriKind.Absolute));

this.DataContext = _context.Tasks.IncludeTotalCount();
}

A few things to note:

1) Your context name might be different then mine (HomeDataContext). It’s best to type SharePointContext. And check in the intellisense for your context name.
2) The url that you pass to the context instance must be the same one you typed when we added the service reference.

Build your project, upload the .xap file to a dir in your SharePoint site and add the Silverlight web part to a page. Provide the web part with the address for your xap file and… you’re all done! You should see all the fields of the task list in your Xceed datagrid, with smooth scrolling, and automatic background data virtualization (in case you have hundreds or thousands of tasks) already enabled.

Please feel free to contact me on Twitter (@jtordgeman) or on my blog with any question you might have, and I’ll see you on the next post :)

---

Note: You will need to add a clientaccesspolicy.xml or crossdomain.xml file to the root of your SharePoint website if you don't use the Silverlight web part on the same server as SharePoint (for example if SharePoint is hosted on http://mysharepoint.com and you query it from a silverlight app hosted on http://mysharepoint2.com).

Xceed DataGrid for Silverlight: Will It Blend?

Jenny [Xceed] — Fri, 10 Dec 2010 14:36:00 GMT

If you never use Blend, then this post will be of no interest to you other than to laugh at my misery; however, if you are a designer who wants to style or template the various elements in Xceed DataGrid for Silverlight, then this is the post for you.

Since the initial release of Xceed DataGrid for Silverlight, we received many questions in regards to styling and retemplating various grid elements in Blend. Unfortunately, the answer until now was "Yes, it can be done. Good luck." Since this answer was understandably unsatisfactory, Matt (@MattD1980) and I decided that it was time to make some tutorials that demonstrate how. Ok, that's not exactly what happened, but that's my story and I'm sticking to it! Now, although these guides will be added to the documentation, we thought it might be a good idea to get the first example out there to help out the designers who need to get the show on the road. So what better elements to start with than the column-manager cells (AKA column headers).

I will start with a semi-empty project that already contains an XML data source. You can refer to the Expression Blend topic in the documentation for instructions on how it was created. A license key was also provided in the public App constructor in order to be able to use Xceed DataGrid for Silverlight (see Licensing topic for more information) .

In order to provide a new style for the column-manager cells, we need to add a column-manager cell to our scene. To do so, type "ColumnManagerCell" in the Asset Library and, once found, drag it to the scene's design surface. Notice that a standalone column-manager cell was added to the XAML. We will be removing it later.

The next step is create a copy of the template, which can be done by right-clicking on the column-manager cell and selecting the "Edit Template->Edit a Copy..." option in the context menu.

Provide your style resource with a key, indicate where you want it defined, then press OK. For this example, I will name my style "UnderlinedColumnManagerCellStyle"

Because we are creating a copy of the template, Blend is kind enough to include everything that is required by the template. To see the newly created style, which is currently identical to the original, scroll down to the bottom.

So let's modify the style to add an "underline" to the column-manager cell on mouse over. To do so, select the column-manager cell in the scene, and the select its top-most parent grid (1) in the Objects and Timeline window. Double click on the Rectangle (2) to add it at the parent-grid level in the visual tree, making sure that is it the last item in the tree since we want it to overlap the other elements (3).

Making sure the Rectangle is selected and correctly positioned at the bottom of the column-manager cell, in the property grid, align it to the bottom by setting its VerticalAlignment property to Bottom, the HorizontalAlignment property to Stretch, give it a height of 4 pixels, a stroke thickness of 0, and change its opacity to 0 since we only want it to be visible when the MouseOver state kicks in. Also make sure to set its background to a nice shade of pink for maximum results. It is also recommended to name your Rectangle. I suggest something snazzy like underlineRectangle.

To recap:

Position the Rectangle at the bottom of the column-manager cell
Make it pink
Set its VerticalAlignment property to Bottom
Set its HorizontalAlignment property to Stretch
Set its Height property to 4, or to any other value if you are feeling wild
Set its StrokeThickness property to 0
Set its Opacity property to 0
Give it a snazzy name

To add the MouseOver state, select the States tab and click on MouseOver in the CommonStates section, which should now put Blend in "recording mode". While in recording mode, select the Rectangle and change its opacity back to 100.

Do not forget to move the focus to another editor in the property grid or you will spend the afternoon trying to figure out why the state is not working! Take my word for it, that was not a pleasant afternoon and involved many expletives.

Once you are done, stop the recording by clicking on the red button. Congratulations! You have successfully added a new visual state!

Obviously at this point you are anxious to try out your new style, but there is still a little bit of work that needs to be done. First, you need to add a datagrid control to the UserControl. To do so, begin by returning the scope to the UserControl and select it in the hierarchy.

In the Asset library, search for "DataGridControl" and, once found, add it to the UserControl.

The last steps are to delete the stand-alone column-manager cell that was added to the XAML, and remove the style key (x:Key="UnderlinedColumnManagerCellStyle") from the column-manager cell's style so that it can be applied implicitly to every column-manager cell in the grid.

I lied, there is one last step, which is to bind the datagrid control to a data source. You can refer to the Expression Blend topic in the documentation for instructions on how it was created and how to bind the datagrid to it.

Hit F5 and voilà! You now have a fancy new style for your column-manager cells!

Good luck!

When Good Things Stick

Jenny [Xceed] — Tue, 07 Dec 2010 19:17:00 GMT

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.

Datagrid’s very capable little brother.

Odi [Xceed] — Mon, 06 Dec 2010 16:54:00 GMT

Datagrids are very flexible controls. They often contain a lot of information and provide tools to visually organize this information and sift through it.

Before WPF/Silverlight, you could not create a data template for items in a listbox or other data controls. It was not feasible to attempt to present tabular data (e.g., name, age, description, photo) beautifully in a listbox item. Datagrids and listviews were therefore a handy solution.

Now that you can template the elements of a listbox to incorporate the key information you want to display, the lowly listbox has gained superhero data visualization powers.

That’s where Xceed comes in. As datagrid experts, we were naturally concerned with the trends we have been observing in the industry. Trends towards simpler interfaces, the multiplication of smaller screens, and touch interfaces. We saw not only that datagrids would have to adapt but that the listbox has gained in importance in a world where developers are simplifying the experience and hiding extra data until the end-user specifically requests to see it.

The listbox is a wonderful control not only for desktop experiences, but for Windows Phone 7 and mobile devices. We just have a tough time visualizing end users using a datagrid on a 4” screen. Columns and rows, and editing data within the cells of those columns and rows, don’t seem to play well there.

Some say that listboxes are the new datagrids. Here's one blog post that had given us some food for thought.

So we set out to improve the listbox. Today, we launched Xceed Ultimate ListBox for Silverlight.

It is the first control Xceed has made that mimics an existing API (the one for the standard Silverlight listbox) instead of providing an entirely new one. We wanted as little of a learning curve as possible. It is also the first control Xceed has ever launched at such a low price point ($89 per developer). We want the barrier to entry to be as low as possible as well.

Why a better listbox?

In the world of Silverlight clients, whether desktop ones or for mobile devices, a lot of the data loaded into listboxes comes over the air or wire. Listboxes aren’t just used to display 5-10 items from an array of objects in memory, they are also used to display hundreds or sometimes thousands of items from remote data sources.

But as the Silverlight listbox works today, it either has to load all of those remote items first, causing the end user to wait while that happens, or it will load only some of the data first, and load it on an as-needed basis. The latter technique is called data virtualization, or paging.

In practically all the implementations we’ve seen, listboxes implementing data virtualization always have usability problems. Some of them make the end user click a “load more” button and wait every time they want more data. Others load the data automatically when you reach the bottom, but still do so only just-in-time and make the end user wait. Most of them have scrollbar thumbs that jump around.

What if the listbox was built with the idea that end users should be able to have an effortless and snappy experience when data virtualization is being used, similar to when the entire data source has already been loaded into the listbox? That’s what Xceed has worked on. I want to call it “super data virtualization”, but on the web site it is simply called “advanced background record retrieval”. Here are the innovations we have put into our super data virtualization:

Automatic record retrieval. No “load more” buttons.
Background record retrieval. Listbox never freezes, always responds to end-user’s navigation commands.
Passive pre-fetching. More than what appears in the listbox gets retrieved, but not more than is needed.
Active pre-fetching. When the listbox UI is not scrolling, the listbox actively retrieves more records to fill its cache.
Fluid UI. Without smooth scrolling, the perceived response time to load more data is that of the complete round-trip of request/response to the server. With smooth scrolling animating for about 0.8s and items that fade in when they arrive, the perceived response time begins only after the animation has completed if items still have not arrived.
Discovery-less start up. To avoid scrollbar thumbs jumping around, or to support grouping, a data-virtualized listbox typically would need to know the total row count, number and size of groups, or other information about the data source. Not this listbox, allowing it to start up faster than any other can.
Optimized navigation. The listbox requests data from the data source using relative queries instead of absolute index-based queries. Such queries execute faster on the server so navigating through the listbox is snappier. We know of no other listbox that works this way.
Query grouping and throttling. During scrolling, queries to the server for more data rows are grouped together when possible. This works because queries are asynchronous and are typically obtaining data not currently in view. During heavy scrolling, queries that are no longer needed are canceled, thereby reducing the load on the server as well as the listbox’s own CPU use.

The goal is to provide lightning fast display of remote data in a listbox. See what we’ve accomplished with Netflix’s online catalog of 130,000+ movies thanks to the listbox connected via ODATA / WCF Data Services.

What else does Xceed Ultimate ListBox for Silverlight bring to the table?

Built-in search box, of course it works with the data virtualization.
Completely fluid UI throughout. Slick and fast smooth scrolling, insert/delete items, etc.
6 beautiful themes.
Deep built-in support for WCF Data Services / ODATA and WCF Ria Services.
Complete grouping support. Displays group headers between items in different groups.
Group headers are “sticky” just like with the iOS listbox. They are always visible.
Group navigation (prev/next) and WP7-like pop-up index to jump to specific groups.
Very little learning curve, simply replace your current listbox and turn on new features.

There’s more, see the complete feature list.

We hope you love this new control as much as we do and help us spread the word about it! Tweet it, Facebook it, blog it, show it to colleagues... it's all good!

Thanks,
Odi

Sneak Peek at Version 1.1 of Xceed DataGrid for Silverlight!

Jenny [Xceed] — Fri, 26 Nov 2010 19:06:00 GMT

It's that time of year again where those of us in the northern hemisphere are starting to huddle down for the 6 months of winter ahead. So what better time than now to let you in on the new features being introduced in Xceed DataGrid for Silverlight v1.1?

First on the list is group headers and footers. Version 1.1 of Xceed DataGrid for Silverlight adds headers and footers to group configurations. Any item can be added as a DataTemplate to the headers and footers, which will then be applied to the appropriate groups.

An innovative feature that is introduced in version 1.1 is "sticky" columns, which takes the basic concept of "fixed" columns and brings it to the next level! By marking a column as "sticky," it will always remain in the viewport: once the column 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, making sure that your most important data is always in view. If other columns are marked as sticky, the will stick to the left or right of any columns that are already "stuck." A "stuck" column will preserve its visible 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:

"But what about fixed columns," you ask? Easy! Columns are considered fixed when they are marked as sticky and they are the first or last columns in a grid. So by simply positioning the columns in the correct position and marking them as sticky will result in these 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.

Also added to the upcoming version are the Dark and Light Metro themes, which are inspired by Microsoft's Metro design philosophy, as seen in Windows Phone 7. These themes provide a bold new look with a configurable accent color.

Xceed DataGrid for Silverlight v1.1 also provides synchronous and asynchronous XML spreadsheet format (xmlss) exporting capabilities with the resulting documents supported by Excel 2002 and up, as well as by the Microsoft Office Web Components Spreadsheet Component. Data can also be exported to the comma-separate value (CSV) format, which is compatible with a wide variety of applications. So whether you decide to export all the items in a grid, the currently selected items, or a customized selection, from a local or remote data source, with v1.1, you can!

Stay tuned for more posts that will delve into the nitty-gritty details of these features.

Getting Started with Xceed DataGrid for Silverlight: Part 2, Making it Pretty

Jenny [Xceed] — Thu, 26 Aug 2010 18:34:00 GMT

In my first post in this series, Binding to a Data Source, I explained how to connect Xceed DataGrid for Silverlight to an OData data source. This post will explain how to configure the datagrid to get the most out of it and your data.

As I said in the first post, loading data from a data source is quite easy; however, the initial result is probably not what most people would like since the data is displayed in its "raw" form. For example, if we take the data returned by the Netflix catalog, you would probably want to limit the number of decimals places for double-typed columns and display an actual image rather than its URL. You may also want to limit the number of columns that are displayed to only those that contain the pertinent information. And so on.

So, first things first, let's reduce the number of columns that are displayed to only those that contain the information we want. There are 2 ways that this can be accomplished: the first being to set the Visible property to false for the columns that are not to be displayed, the second is to set the grid's AutoCreateColumns property to false and manually define the desired columns. The first option would be acceptable if only a couple of columns from a large list are to be hidden; however, the second option is preferrable if more columns are to be hidden than displayed. This is the option that we will use in this sample since we only want to display 6 of the columns.

<sldg:DataGridControl x:Name="netflixGrid"
ItemsSource="{Binding Path=NetflixTitles}"
AutoCreateColumns="False">

<sldg:DataGridControl.Columns>
      <sldg:Column FieldName="BoxArt"
                   Title=""
                   Width="100"/>
      <sldg:Column FieldName="ShortName"
                   Title="Title"
                   Width="200"/>
      <sldg:Column FieldName="Synopsis"
                   Width="600"/>
      <sldg:Column FieldName="ReleaseYear"
                   Title="Released"
                   Width="75"/>
      <sldg:Column FieldName="Rating"
                   Width="75"/>
      <sldg:Column FieldName="AverageRating"
                   Title="Average Rating"
                   Width="100"/>
   </sldg:DataGridControl.Columns>
</sldg:DataGridControl>

Now that we have limited the number of columns to only those we want, the next step is to decide how the content in those columns is displayed. In the columns that we decided to keep, there are 3 that could use a facelift. These are the BoxArt column, in which we could display an image rather than a URL; the Synopsis column, in which we could format the text to support the various HTML tags such has bold, italic, and hyperlinks (i.e., href); and the AverageRating column, in which we could display a "star-rating" rather than simply displaying a numeric value.

Up first, the BoxArt column. But before we start, let's make a grocery list of what we will need.

In order to change how the content of each cell in a column is displayed, you need to provide a DataTemplate to the column's CellContentTemplate property. Easy enough. So what will we need to change a URL into an actual image? For starters, we will need to create a new DataTemplate that uses an Image and whose Source property is bound to the LargeUrl field, which provides the URL. In some cases a title will not have a URL. When this happens, we want to display an image that indicates that no image is available for the title. In order to do this, we will create an IValueConverter that will return the "no image" image when one is not provided for the title, and use this converter in the binding that is applied to the Source property.

<local:BoxArtImageSourceConverter x:Key="boxArtImageSourceConverter" />

<DataTemplate x:Key="boxArtCellContentTemplate">
   <Image Source="{Binding Path=LargeUrl, Converter={StaticResource boxArtImageSourceConverter}}"
          Height="100"
          VerticalAlignment="Center"
          HorizontalAlignment="Center"/>
</DataTemplate>

The next DataTemplate we will create is one that will be used by the AverageRating column to display a star-rating rather than a value. Like the BoxArt column, we will need to create an IValueConverter that will take the value and return a star-rating instead. To keep things clean, the various data templates that can be returned by the RatingConverter are defined in the ImageResourceDictionary.xaml resource dictionary.

<local:RatingConverter x:Key="ratingConverter"
                       FullTemplate="{StaticResource fullStarDataTemplate}"
                       HalfTemplate="{StaticResource halfStarDataTemplate}"
                       EmptyTemplate="{StaticResource noStarDataTemplate}"/>

<DataTemplate x:Key="ratingCellContentTemplate">
   <ItemsControl ItemsSource="{Binding Converter={StaticResource ratingConverter}}"
                 VerticalAlignment="Center"
                 HorizontalAlignment="Center"
                 ToolTipService.ToolTip="{Binding StringFormat=\{0:f1\}}">
      <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
         </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
   </ItemsControl>
</DataTemplate>

The last DataTemplate will be used by the Synopsis column to properly format the text that it displays according to the various HTML tags found throughout the text. This template required a little more work since some things that were required (*cough* FlowDocument *cough*) are missing from the Silverlight framework and needed to be created. Like the other 2 columns, an IValueConverter was also needed, except this one converts plain text to a Paragraph that contains the appropriate text and inlines (e.g., Hyperlink).

<local:TextToParaConverter x:Key="textToParaConverter"/>

<DataTemplate x:Key="textWrappingContentTemplate">
   <local:BindableRichTextBox BindableBlocks="{Binding Converter={StaticResource textToParaConverter}}"
                              BorderThickness="0"
                              Background="Transparent"/>
</DataTemplate>

Now that we have all these nifty data templates, simply assign them to CellContentTemplate property of the appropriate columns, and voilà! All data is now displayed in a more user-friendly and appropriate manner. Sprinkle a little sorting and grouping, and you are ready to go!

<sldg:Column FieldName="BoxArt"
             Title=""
             Width="100"
             CellContentTemplate="{StaticResource boxArtCellContentTemplate}"/>

<sldg:Column FieldName="Synopsis"
             Width="600"
             CellContentTemplate="{StaticResource textWrappingContentTemplate}"/>

<sldg:Column FieldName="AverageRating"
             Title="Average Rating"
             Width="100"
             CellContentTemplate="{StaticResource ratingCellContentTemplate}"/>

If you would like to download the sample to play around with it and have access to the custom classes that were created for it, you can do so HERE!

Getting Started with Xceed DataGrid for Silverlight: Part 1, Binding to a Data Source

Jenny [Xceed] — Wed, 25 Aug 2010 19:48:00 GMT

A while back Odi (@kosmatos) tweeted about how easy it was to bind Xceed DataGrid for Silverlight to an OData data source, and he was right. It is easy! So easy in fact that it wouldn't make for much of a blog post. So what I decided to do is show you how to connect to an OData data source as well as demonstrate how to set up the grid to get the most out of it and your data. Of course, you can swap an OData source for another one of your liking.

Obviously, the first step is to connect to an OData data source to get some data. To do so, add a service reference to your Silverlight application, provide an address to an OData source, such as the Netflix catalog, and give it a more appropriate namespace name.

Now that the service reference is added to the project, let's add a property to the MainPage that will expose the DataServiceQuery that contains the Netflix titles, including the total count of all entities in the entity set. This is the property that the grid will bind to to get its data. Note that I have also set the DataContext of the page to itself to make my life easier.

private NetflixCatalog m_catalog = null;
public DataServiceQuery<Title> NetflixTitles
{
   get
   {
      if( m_catalog == null )
         m_catalog = new NetflixCatalog( new Uri( "http://odata.netflix.com/Catalog", UriKind.Absolute ) );

      return m_catalog.Titles.IncludeTotalCount();
   }
}

So let's get to down to the nitty-gritty and add the datagrid to the page so that we can bind it to the Netflix data. Like most item-containing controls, the grid has an ItemsSource property through which we will bind to the NetflixTitles property. Because I set the data context of the main page to itself and the data context of the grid is the page, a simple "path binding" can be used. Something like this:

<sldg:DataGridControl x:Name="netflixGrid"
ItemsSource="{Binding Path=NetflixTitles}"/>

And that's it! In theory, there is nothing else that needs to be done. All the data will be loaded in the grid and can be grouped, sorted, filtered, and edited, but it won't be as pretty as it could be.

So yeah, only a couple lines of code and XAML to get the grid to load data from an OData source, but there is more to displaying data than simply having it on the screen. You will most likely want your data to be displayed in an attractive and easy-to-understand manner for your end users. Not a problem! But I'll show you in my next post :)

If you can't wait for the next post, you can always download the full sample and try it out for yourself.

Stay tuned!

Silverlight Datagrid: Magical results

Odi [Xceed] — Thu, 29 Jul 2010 18:06:00 GMT

Xceed has been working for over 1.5 years and has put over 18000 person-hours of work on one single new Silverlight control, so that with only a couple of lines of code, you can achieve some magic.

A bit of history.

At Xceed, we've been creating components and class libraries for Windows developers for 16 years. Our first datagrid control was started 10 years ago. We offered a variety of other UI controls as well, such as charts, treeviews, menus, navigation and docking window controls. Like other component vendors, we created a “collection” or “suite” of many controls. Five years ago, our entire UI controls team began to focus solely on developing datagrid controls.

By putting all our energy exclusively behind datagrids, we felt we could do a better job than by spreading ourselves thin working on many controls. We could elevate datagrids to the next level, and cater to developers who would rather have a great datagrid than a collection of mediocre controls. We would target developers who value quality over quantity.

This move was made when we began developing Xceed DataGrid for WPF. It allowed Xceed to be the first to market with a datagrid for WPF (released January 2007, months to years before the other component vendors had theirs ready). We were not only first, but we had an amazing product that got impressive testimonials. Microsoft even used it in parts of Visual Studio 2010.

Our competitors kept their existing strategy of creating a wide variety of UI controls. Their datagrids received relatively little love. In contrast, with only one product type to think about, we were able to churn out an impressive 39 updates in 3.5 years. Customers were rarely kept waiting for resolutions to issues or new features. Today our WPF datagrid leads in stability and features, and offers perhaps the best user experience of any datagrid on any platform.

So what's new in the datagrid department that’s magical?

If you take a look at the competition's Silverlight datagrids and marketing for them, you'll see a recurring message: everyone claims that their datagrid is fast. "Blazing fast" says one. "The fastest" says another. Some of them are indeed fast, but in order to be fast, they have to load up the entire data source first.

That might be OK for Windows Forms applications accessing a local SQL server, however, this is ~~Sparta~~ Silverlight. Many apps built with Silverlight will be accessing data sources that are somewhere else on the internet, not located on the user’s own computer or on a company’s speedy intranet. Having to wait for hundreds (or thousands) of data rows to be transferred over the internet before your datagrid is functional yields a poor user experience. It also drains server and network resources, and client memory.

Web developers have been facing this challenge for years.

To avoid having to load all the data, Web developers use a pattern called "paging". If you've ever performed a Google search, you are familiar with paging. A Google search often yields thousands or millions of results, but Google only displays the first 10, and then presents you with a paging interface, providing you with “next page” and “previous page” navigation.

Most Silverlight datagrids have adopted paging as their solution to working with remote data sources. You put them into a special “virtual” or “server” mode. That’s where things fall apart.

The fast scrollbar experience disappears, replaced with paging navigation. Clicking on “next page” does nothing until a round trip to the database is completed and the next page of results is delivered. Unlike with Google searches, this can take seconds, and meanwhile the datagrid’s user interface is frozen. These delays are frustrating and reflect upon your entire application.

There’s nothing blazing fast about it.

That might explain why no other Silverlight datagrid currently provides a demo of the datagrid accessing a remote data source. The paging or data virtualization demos all use local or randomly generated data, not data on a server somewhere on the internet.

Now wouldn’t it be great if a datagrid could feel and behave as if all the data was already loaded, even if the data was on a remote server? Using a scrollbar instead of a paging interface? Wouldn’t it be great if we didn’t have to wait every time we navigated forwards or backwards for the remote database to respond?

That’s what Xceed set out to do, and we believe we have achieved this goal. We designed and built an entirely new datagrid built from the ground up with asynchronous data virtualization in mind. We implemented a number of important advances in data virtualization and datagrid user interface behavior that all work together to make browsing and editing remote data feel almost as fast as as working with local data. None of these advances have ever been done in a datagrid up until now.

These advances are, on a high-level:

A Fluid UI that helps mask network lag
An intelligent background record retrieval system
Optimized network communications
Asynchronous editing and validation

Let’s start with the Fluid UI. A Fluid UI is an animated one, where the content it presents is given a real-world feel. When items move in a Fluid UI, they don’t jump to their new position, they animate, with physics-like motion, to their new location. Things happen smoothly.

So how does that help mask network lag? It’s all about perception. Here is the scenario with typical datagrids: the user clicks “line down” or “page down” or “next page”. The datagrid immediately launches a query for more data. When that data comes in, only then does the datagrid update its display by jumping down one line or displaying the next page. The perceived response time is that of the complete round-trip of request/response to the server.

For example, if clicking “next page” takes 1.5s to obtain and display data from the data source, then the perceived waiting time is the entire 1.5s, even if a “loading” animation is displayed somewhere on the grid’s surface to acknowledge the command.

On the other hand, with a Fluid UI, when the user clicks “line down” or “page down”, an animation to the next line or page immediately begins. This animation typically takes about 0.8s to complete. During this time, the end user sees “dummy” data rows animate into view – exactly as expected. The end-user feels that everything is responding and working as expected, even if the dummy data rows have no data in them yet. When the data arrives, it fades in smoothly.

In this scenario, even if the database query (launched at the same time as the animation starts) takes 1.5s to complete, the true perceived waiting time starts only after the animation has completed, and only if the data hasn't arrived by that time. The effective waiting time in the above example is reduced to 0.8s – half the time.

The next advance is the use of an intelligent background record retrieval system. We also call it Asynchronous Data Virtualization, but either way, it’s new in datagrids.

In order to be able to launch database queries for more rows to display without freezing the UI, the data virtualization mechanism has to work in the background. No other Silverlight datagrid does this (actually we believe no other company's datagrid on any platform does this). Without being asynchronous, when data is being accessed from the data source, all UI interaction is halted. That means users can’t click at their pace to move forward a few pages, nor change their mind and scroll in the opposite direction (until a round-trip to the server completes). It feels sluggish.

One Silverlight datagrid has implemented “background loading”, but that only works when you are loading the entire data source into the datagrid, not when getting the data in portions as needed. It also means that while the entire data source is being transferred to the datagrid, the scrollbar thumb is constantly getting smaller, moving up, and the datagrid is slow. Another datagrid has implemented "Stealth Paging" but it offers no advantages whatsoever over regular paging UI except to provide a scrollbar.

Why is Xceed’s background retrieval “intelligent”? Because we have added “passive and active pre-fetching” to the mix.

What is passive pre-fetching? When a typical data virtualizing or paging datagrid first loads up, it queries for the first page of data to display. But why stop there? We know that there are two possible navigation commands an end-user can do. The first is to scroll down or go to the next page. The second is to go to a specific page. In a typical datagrid, if the user scrolls down (or up), it is guaranteed that the end-user will be kept waiting, because the next (or previous) page of data has to be requested from the server.

Why not, when requesting data from the server, ask for a bit more data than we need to display on that first page? Why not ask for an additional few pages, if the overhead of doing so is acceptable? The result is that, when the user starts scrolling down, there is no waiting. When the buffer runs out, a new request is made for more data, again asking for more than the next page.

Active pre-fetching: the icing on the cake.

When the datagrid is idle, meaning the end-user is not performing any actions, the datagrid runs a background task that makes sure that the buffer of pages before and after the one currently being displayed is kept full. If the buffer is nearly empty, why should the datagrid just sit there doing nothing? Doing nothing means that it will be a near certainty that the buffer will run out sooner and the end-user will experience lag.

Active pre-fetching makes the datagrid work harder to preserve the illusion that all the data is actually already loaded. It helps silently query for more data so that the datagrid is more often able to display the previous or next page with absolutely no lag at all.

Optimized network communications.

We’ve also advanced the state of the art in how queries are made to the data source. This comprises 3 innovations:

1. No discovery required: Unlike other data virtualized datagrids, this datagrid does not require knowing the total row count, number and size of groups, or any other information about the data source. This eliminates a sizeable extra query that all other datagrids that support data virtualization require, making the Xceed datagrid load faster than any other.

2. Optimized navigation: The datagrid requests data from the data source using relative queries instead of absolute index-based queries. Such queries execute faster on the server so navigating through the datagrid is snappier. We know of no other datagrid that works this way.

3. Query grouping and throttling: During scrolling, queries to the server for more data rows are grouped together when possible. This works because queries are asynchronous and are typically obtaining data not currently in view. During heavy scrolling, queries that are no longer needed are cancelled, thereby reducing the load on the server as well as the datagrid’s own CPU use.

So to conclude, I’ve talked about 7 techniques (Fluid UI, background data virtualization, passive and active pre-fetching, and three query optimizations) that we’ve applied to the datagrid’s data virtualization that all aim to make our Silverlight datagrid the only one to provide seemingly lightning fast access to remote data. Or put another way, it lets end-users access remote data as fast as local.

For a description of what is actually happening under the hood, see Jenny's blog post.

Odi

Data Virtualization: Load Smarter, Not Harder*

Jenny [Xceed] — Wed, 28 Jul 2010 19:36:00 GMT

So after a year and a half of development, Xceed DataGrid for Silverlight was officially released this week! Unlike Xceed DataGrid for WPF, where we were first to market, we are a little late coming into the Silverlight datagrid game; however, it will have been well worth your wait. We did not just want to make another Silverlight grid. We wanted to make the BEST Silverlight grid. So why is it so awesome? Simple. From the first line of code that was written, user experience and data virtualization were our top priorities. So how does it work? I'm glad you asked!

The data-virtualization engine behind Xceed DataGrid for Silverlight is the invisible maestro that orchestrates all the behind-the-scenes data management. Although it is the cornerstone on which Xceed DataGrid for Silverlight was built, in most cases, you will never have to deal with it and will only know that it is working because everything is working so well. To get a little bit more technical, the data-virtualization engine is basically a layer of enumerators that each manipulate and process the data items that are displayed in the grid, all the while making sure that "extra" items are available, just in case.

Take a look at the image below and consider a simple operation, such as a line down (i.e., "Get(1)"):

When the grid requires new items (1), the request is processed by the data-virtualization engine, which begins its initial pass by querying the caching enumerator to see if it has the data items that are needed (2). If the caching enumerator has the items, they are immediately returned and displayed in the grid (10). If the caching enumerator does not contain the required items, the request is sent to the async enumerator, which will create and immediately return "dummy" items (3) so that the grid remains responsive even though there is a pending request to retrieve new items. The request will then be queued along with any additional pending requests. The async enumerator is also responsible for optimizing the query that is sent to the subsequent enumerators. For example, if three line down operations are queued, the async enumerator will condense these pending operations into a single "Get(3)" query, thereby only sending one request to the next enumerator rather than three (4). Obviously, if there is only one pending request within a reasonable lapse of time, it will be sent as-is to the next enumerator.

Once the async enumerator has optimized the pending queries, the resulting query is sent to the grouping enumerator, which takes care of appending any grouping criteria (i.e., "OrderBy") to the query that is being sent to the data source (5). Once the grouping enumerator has added its requirements, the query is passed to the filtering enumerator, which may also append its filtering criteria if it is using a filter expression (6). If a predicate is being used to filter the items, the information will not be appended to the query and the unmodified query will be sent to the buffering enumerator, which is next in line. The buffering enumerator, which typically contains multiple pages of data that has been fetched from the data source, is the last layer before the query is handed over to the data-source provider. Now, the buffering enumerator has an additional role, which is it make sure that it makes a worthwhile roundtrip to the server. If it realizes that the trip is "not worth it," as in this example of only retrieving three items, it will decide to get more items and keep them in its buffer (7). Once the query exits the data-virtualization engine, the data-source provider takes over and queries the data source using the transformed query (8).

All this time, the grid has remained fully responsive.

Once the data-source provider receives the items from the data source, they are handed to the buffering enumerator, which passes the items that were requested to the filtering enumerator and buffers the rest for later use. At this point, if a predicate is being used to filter the items, it is possible that the filtering enumerator rejects the items that are received and requests more from the buffering enumerator, which luckily grabbed more than was requested. If only a filter expression was used, then the items are passed directly from the filtering to the grouping enumerator. Like the filtering enumerator, it is possible that the grouping enumerator rejects the items. For example, if the items belong to a collapsed group, they will be rejected and new items will be requested (9). Of course, the grouping enumerator will modify the request to make sure that further requests will "jump" over collapsed groups.

After the items have successfully passed the lower enumerators, they are finally transferred to the async enumerator that will replace the dummy items with the actual items, which will then be displayed in the grid (10).

In addition to the enumeration layers, Xceed DataGrid for Silverlight also actively pre-fetches new items and rebalances the caching and buffering enumerators while the data-virtualization engine is idle. What this means is that when there are no pending requests in the async enumerator, the engine will actively retrieve new items and make sure that the currently displayed items are moved to the middle of the buffers. In other words, if the currently displayed items are located at the end of the buffer, they will be moved to the middle, the extra items at the top will be cleared, and new items will be fetched to complete the buffer.

So there you have it: a glimpse of the inner workings of Xceed DataGrid for Silverlight!

*Title created by and stolen from Mike Strobel (@mstrobel)

Why There Won't Be A SelectedItems Property And Why You Will Like It

Jenny [Xceed] — Fri, 07 May 2010 14:54:00 GMT

One of the first things you will notice when you`ll start using Xceed DataGrid for Silverlight is the fact that there is no SelectedItem(s) property. That's right. No SelectedItems property.

The upcoming datagrid for Silverlight is a very different beast than today's current datagrids. It is built from the ground up to load and navigate through remote data sources extremely efficiently. It aims to make those remote data sources feel like they are completely loaded locally in your datagrid, without actually doing so. To achieve this, it takes data virtualization a few steps further than any other datagrid ever has. I talked about some of these advances in my post that introduces Xceed DataGrid for Silverlight. One of them is that everything this datagrid does happens asynchronously. This makes for a highly responsive user experience, but there are a few things developers will have to do differently in order to reap the benefits.

Although it may seem absurd, the decision to not have a SelectedItems property was not taken lightly, and many long discussions were had with proponents on both sides of the debate. So why is it not there? Simple. Because 95% of the time, it wouldn't work. Yes, 95% is an arbitrary number but it is a fair representation. The only way to keep your application responsive, even when the network isn't, is to use asynchronous data virtualization, which means to read and write data in the background. Having a synchronous SelectedItems property in this situation made no sense since the UI would have to wait for the selected items to be returned from the server. So we decided to go with a fully virtualized approach and created a selection model in which "selection ranges" are created. These ranges abstract the need to store the exact list of selected items and provide instantaneous selection across any number of items. If this process were done locally, the selection range would need to be processed as soon as it is created.

For example, let's say you have a large source with and the user selects a few items currently on screen. In this case, the SelectedItems property would return immediately since the items are already loaded. The UI wouldn't lock-up. But if the user selects a group of items and many of them aren't on screen, those would have to be immediately fetched from the data source before SelectedItems could return its value. The UI would freeze for an unpredictable amount of time while those items are returned, making your application feel sluggish.

This is why we exposed the BeginGetSelectedItems and EndGetSelectedItems asynchronous methods rather than a SelectedItem(s) property: we wanted you to be aware that requesting the selected items can be a costly operation and that in most cases, we could not guarantee if and when you would get the result.

"But I absolutely MUST have a SelectedItems property!" Ok!

public IEnumerable<object> SelectedItems
{
   get
   {
      return ( IEnumerable<object> )GetValue( SelectedItemsProperty );
   }
   set
   {
      SetValue( SelectedItemsProperty, value );
   }
}

// Using a DependencyProperty as the backing store for SelectedItems.
// This enables animation, styling, binding, etc...
public static readonly DependencyProperty SelectedItemsProperty =
DependencyProperty.Register( "SelectedItems", typeof( IEnumerable<object> ), typeof( MainPage ), null );

private void GetSelectedItems()
{
   IAsyncResult result = this.sldgDataGridControl.BeginGetSelectedItems( new AsyncCallback( this.ProcessSelectedItems ), null );

   if( result.IsCompleted )
      this.SelectedItems = this.sldgDataGridControl.EndGetSelectedItems( result );
}

private void ProcessSelectedItems( IAsyncResult result )
{
   if( result.CompletedSynchronously )
      return;

   this.SelectedItems = this.sldgDataGridControl.EndGetSelectedItems( result );
}

private void DataGridControl_SelectionChanged( object sender, EventArgs e )
{
   this.GetSelectedItems();
}

Xceed at Mix10!

Matt — Tue, 02 Mar 2010 18:24:00 GMT

Feels like not too long ago I was writing about Xceed going to Mix09 and here we are a year later, ready to go to Mix10! We are all very excited about the announcements that will be made in regards to Windows Phone 7 Series development and are looking forward to some announcements about Silverlight's future as well. And who knows, maybe even WPF? Come on Microsoft, give WPF some love! :).

That said, if you catch Cat, Odi, Charles, or myself at the event and have questions about our products, don't be shy and come talk to us! We'll be staying at the Mandalay Bay hotel and will try to be part of social events there. You can check us out as usual on twitter (@MattD1980 @Cattatatow @Kosmatos) to see where we're hanging out.

I hope the keynotes and sessions this year will be as inspiring as last year. Mix09 by far surpassed my expectations and it would seem that even more is brewing in Microsoft's lair. I still have to fill my schedule with the sessions I will be attending. So much to learn, so little time!

See you there and don't hesitate to contact us if you want to meet up!

Xceed DataGrid for Silverlight Tech Preview!

Jenny [Xceed] — Wed, 24 Feb 2010 14:29:00 GMT

The Silverlight development team has been hard at work creating our Silverlight datagrid, and I thought that I would let you in on our progress and give you a glimpse as to what you can expect when it's released. Last year at PDC 2009, we demoed what was an early-stage version of the grid. Since then, it has come a long way and is nearing feature completion.

Xceed DataGrid for Silverlight takes user experience to a whole other level. Perfectly smooth horizontal and vertical scrolling, fully animated column reordering and resizing, customizable animations for group expansion and collapse, as well as transition animations for when rows are added or removed, provides an unprecedented level of UI slickness and responsiveness.

Asynchronous data virtualization. THE must-have in a Silverlight data grid, it’s the cornerstone on which Xceed DataGrid for Silverlight is built. We’ve packed a lot into our implementation of this, such as major advancements in how virtualized data is handled, automatic discovery, active pre-fetching and caching of data, quick navigation, and instant grouping. You can add to that built-in support for WCF Data Services and WCF RIA Services, as well as "event-driven" and "full-list" data sources (i.e., pass-through data virtualization) and many more to come, which means that where you get your data from no longer matters. Just connect to the source, and we handle the rest. Simple. Trust me: you haven't seen anything like this in any other grid before.

Sometimes, appearances are everything. Don't like the yellow/orange/i-am-sorry-Catherine-i-do-not-know-the-exact-color border in the PDC-demo theme? Change it! Xceed DataGrid for Silverlight is 100% "blendable" and its elements can be customized to match the look and feel of any application. Or if you prefer, you can use one of the built-in themes that were designed for the grid with user experience in mind.

Now, I know the first question our current WPF clients will have is this: "I have a project that currently uses Xceed DataGrid for WPF. Can I just switch it out for the Silverlight version?" The answer to that is no, you can't. Why? Well there are a couple of reasons. First, Silverlight is not WPF; there are things you can do in WPF that you can't do in Silverlight. Doing a direct API port would have been 1) nearly impossible and 2) would not have allowed us to take full advantage of the Silverlight platform. Second, since the initial release of Xceed DataGrid for WPF, we have developed new, innovative ways of handling data, but it would be impossible to implement them in that product without doing major breaking changes. With our upcoming Silverlight datagrid, we have been able to implement these new techniques without worrying about backwards compatibility. At any rate, although it is not a direct API port, the API will feel very familiar and you should feel right at home using the Silverlight datagrid. We intend to also provide a WPF-compiled version of the Silverlight grid, so if you want to build for both platforms, you will have the option to do so with the Silverlight datagrid.

Want a quick point-by-point list of the features/goodies that we are aiming for? Here you go:

Ultra smooth and responsive tabular layout
Multi-level grouping
Sorting
Filtering
Sticky group containers
Animated vertical and horizontal scrolling
Fixed and scrollable headers and footers
Easy group navigation (think something similar to the group-navigation control in Xceed DataGrid for WPF)
Animated column reordering and resizing
Row and cell selection

Data Virtualization

Asynchronous data loading for continuously responsive UI
Minimal (if at all) code required
No discovery needed on remote data source
Pre-fetching and caching of data
Instant expanding and collapsing of groups
Quick navigation through data source
Support for almost any type of data source including WCF Data Services and WCF RIA Services

Editing

Default editors for all the common data types
Ability to create custom cell editor controls
Validation (e.g., IDataErrorInfo, INotifyDataErrorInfo)

While you wait for the official launch of Xceed DataGrid for Silverlight, I will (hopefully) be blogging about specific features and how easily they can be used in any Silverlight application. I will also take you on indepth tours of some of the design concepts behind our latest baby

In order to get feedback from the community, we will be opening a private beta in March to make sure that we have the best possible product when it is officially released. If you are interested, send me an email to datagridbeta@xceed.com letting me know the type of project in which Xceed DataGrid for Silverlight would be used (e.g., new project, moving existing WPF project to Silverlight, replacing an existing grid) and the timeframe needed to make a decision, and I will sign you up for the beta.

Questions, comments, feature requests? Now's the time!

Xceed Professional Themes for WPF - 2 New Themes!

Matt — Fri, 19 Feb 2010 20:39:00 GMT

The upcoming release of Xceed Professional Themes for WPF will be our biggest update to the product since it was released last year. The latest incarnation of Xceed DataGrid for WPF brought a Windows 7 inspired theme as well as the Live Explorer theme to the table. Both these themes will now be available in the next version of Xceed Professional Themes for WPF.

So let's talk about the Live Explorer theme. When we first created our Xceed DataGrid for WPF Live Explorer we wanted to have a branded theme that would demonstrate how much of our product you could "re-style". At the time we didn't offer it as an available theme since we thought it would be too specific to our application. Boy, did we guess wrong on that one! Many of you responded very well to the theme and some of you were furious at us for not making it available. We heard you! Here's what it's going to look like :

The Live Explorer theme was crafted so you can easily add it to your window and instantly get the look we are using in our own Live Explorer. It is perfect for applications that require a "darker" environment with a hint of color to keep it visually pleasing. Keep in mind that the video displays a work-in-progress version of the theme but very little should change visually when it is released. We also decided to expose an additional style for the toolbar to make it orange instead of gray.

The second theme we added is a Windows 7 inspired theme. Windows 7 creates a very colorful and exciting environment and we wanted to capture this and bring it to our products. We tried to bring a more extravagant experience with this theme and hopefully it will allow you to build a fun application around it.

Both these themes are available in Xceed DataGrid for WPF and the upcoming version of Xceed Professional Themes for WPF. Another version of Xceed Professional Themes for WPF will provide styles for Microsoft's datagrid and calendar controls should come out shortly after.

If you have any questions about the product, feel free to contact us!

Ode to the Hidden and Forgotten

Jenny [Xceed] — Fri, 22 Jan 2010 17:41:00 GMT

Ever since I started working in Silverlight, I found some strange ommissions, whether voluntary or not, in the Silverlight API. At times, this was very frustrating since I was expecting something as common as BindingList to be there. So, to end this week on a more "creative" note, I present you with an ode. Enjoy!

Ode to the Hidden and Forgotten

My head aches as I search for something new,
Something to replace all the things they do.
Yet Silverlight keeps thwarting all my plans,
By hiding classes that I want to use.

No longer can I batch initialize.
Oh, where is ISupportInitialize?
Why has IBindingList been abandoned?
I don't want ObservableCollection!

Why do you stop me from selecting styles?
Is StyleSelector never to return?
Triggers! Oh, dear Triggers! Where have you gone?
Without you, I will have to manage states.

And to all the others that are hidden,
And to those that were simply forgotten:
We will remember you and all you do,
When we must search for something new to use.

Sneak Peek at Version 3.6!

Jenny [Xceed] — Mon, 18 Jan 2010 18:44:00 GMT

So I didn't get much feedback from my post asking for help in regards to what to write, so I will go with the only suggestion I received and let you in on the upcoming features planned for the next major version of Xceed DataGrid for WPF.

So let's start with a feature that clients have been asking for since the virtualizing collection view was released: multiple selection! Yes ladies and gentlemen you will finally be able to select more than one row when using a virtualized source! Actually, the whole selection process is being revamped, so expect to see some (long awaited) changes including.... wait for it.... CELL SELECTION!

Performance! As if the grid was not already fast enough, get ready to see some performance enhancements in the standard table view!

Finally, after many many requests, the Live Explorer theme, which can be seen in the the Xceed DataGrid for WPF Live Explorer, is now included with Xceed DataGrid for WPF! Want more? How about a beautiful new Windows 7 theme? (I feel like I am on an infomercial!).

Another fantastic new addition is the print preview, which will allow users to take a look at their snazzy documents before sending them to the printer.

QTP? Did someone say QTP? You heard right! The upcoming edition of Xceed DataGrid for WPF will provide full QTP support!

Last, but definitely not least since I am most likely forgetting some, is the new group-navigation control, which replaces the previous group-navigation button, and provides quick and easy navigation between groups.

So which features are part of the Standard Edition and which ones are part of the Professional Edition? Glad you asked! Here's the breakdown:

Professional Edition Features

Windows 7 and Xceed Live Explorer themes
Print Preview
Multiple selection when using data virtualization
Group-navigation control
QTP support

Standard Edition Features

Improved performance in table view
Cell selection
Customizable cursors in most views

Of course, you can always check out our feature comparaison chart for the full list

Enjoy!

My Search for My Perfect Twitter Client

Jenny [Xceed] — Tue, 12 Jan 2010 16:00:00 GMT

Hello, my name is Jenny (@_random_) and I am a Twitter addict. Okay, not really and nothing even close to @kosmatos, but close enough that I check Twitter many times a day at work and on my iPhone to see what is going on. I don't follow many people and not many people follow me, but I like the interactions I have with those people and sometimes good conversations and suggestions come up. Sometimes I just write random stuff because I am bored. But I guess that if there is a point to Twitter, that is it.

So, ever since I have come back from the PDC, I have been using the Seesmic desktop client for Twitter, and although not perfect, it seemed to "do the job" although something was annoying me about it and yesterday I figured out what it was: the scrolling! When I scroll, I don't want to have to spend a few seconds finding the last tweet I was reading. It's annoying and it breaks the "flow". And so began my search for the perfect Twitter client this morning.

Now, if you are expecting an indepth review of Twitter clients, you are reading the wrong blog post. I didn't go looking for THE best Twitter client. I went looking for the best one for ME. So what was I looking for? I had no idea, but I figured I would know it when I saw it. So the first client I installed after uninstalling Seesmic was Tweetdeck, which many people at Xceed seem to enjoy using so I figured that it was probably a safe bet. A couple of minutes later, I was up and running with Tweetdeck and a couple of minutes later it was unistalled. Yes, it scrolled better than Seesmic but I found it hard to differentiate between my tweets, those that are replies to my tweets, and all the other noise. I really hate the new "Blend" themes (if that's what they are called). Use color people!! Black, white, and multiple shades of gray are not the best colors to use when you need to differentiate things. If you insist on using them, at least give me the option to change or customize them to something that I will like. Yes, I know this is a matter of opinion, but I told you I was looking for the perfect Twitter client for ME, not for YOU (I'm talking to you @superdupercat! )!

While on Tweetdeck, @ftdube sent me a tweet telling me to try Digsby, so I did. As soon as Tweedeck was uninstalled, I downloaded and installed Digsby. I would like to say that I actually tried it; however, when I attempted to add my MSN account in addition to my Twitter account (hey, it's also an IM client) it said my password was "too long". Excuse me? My password is too long? Ummm. No. I didn't even try it as a Twitter client. If it can't handle 24+ character passwords, it has no business being client for anything.

After my failed Digsby attempt, I took a look at the Twitter web interface to see what clients people were sending from. I saw many Tweetdecks and some Seesmic, but other than that it seemed to be all iPhone apps. "iPhone apps!! Maybe Twitterrific is available for Windows" I thought to myself. So off to the Twitterrific website I go only to be disappointed that there is no Windows version available. I love Twitterrific on my iPhone. It just works and it's easy to find/see what I am looking for. But alas, I was to be disappointed one more time.

At this point I am getting frustrated and thinking about going back to Seesmic since the only thing that actually bugged me was the scrolling. After quick consideration I decided to go back to the Twitter web site to see if they had a list of clients that they recommended. Lo and behold, right beside the listing for Twitterific was Twhirl. I had seen some tweets that originated from Twhirl before so I decided to try it out. Why? Honestly, because it looked pretty in the screenshot. No black/white/gray theme. 45 minutes later, I am still using it.

So what was I looking for? I think in the end it came out to "easy". I want it to be easy. I want to easily see what I tweeted, who replied, and whatnot without having to really think about it. The fact that it can stay on top of other windows (with or without opacity) and also that fact that it has a built-in spell checker just made it that much better for ME.

So that's it. My search for my "Perfect Twitter Client" has come to an end. For now