Click here to Skip to main content
13,291,084 members (69,167 online)
Click here to Skip to main content
Add your own
alternative version

Stats

28.8K views
2.5K downloads
17 bookmarked
Posted 4 Jun 2009

Build Your Own DataGrid for Silverlight: Step 3

, 4 Jun 2009
Rate this:
Please Sign up or sign in to vote.
Add headers to your data grid.

1. Introduction

Tutorial overview

This article is the third part of a tutorial explaining how to build a full featured DataGrid using Silverlight and the GOA Toolkit.

In the first part of this tutorial, we saw way of creating a read-only grid's body. In the second part, we focused on the implementation of editing and validation features. In this third part, we will turn our attention to the headers of the grid.

All along this article, we will assume that you have completed reading the first and second parts of the tutorial. If it is not the case, we strongly advise to do so. You can access them here:

Get Started

This tutorial was written using the GOA Toolkit 2009 Vol1 build 289. If you have already implemented the first and the second steps of the tutorial before this article was released, you may need to upgrade. Check that you are working with GOA Toolkit 2009 Vol1 build 289 or after.

Be sure to have installed this release or a more recent one on your computer (www.netikatech.com/downloads)

Goals

During the two previous tutorials, we built the body part of the grid. The grid body that we have built has all the basic features of a data grid (cell, navigation, cell editing ...). Some advanced features have been implemented (virtual mode, DataTemplate ...). Nevertheless, our data grid will not be useful until we are able to link headers to the cells it displays.

This is the purpose of this third tutorial.

As our grid can display hierarchical data (nodes and children), we must be able to link the headers to any level of the grid. We will implement that in two different ways:

  • By allowing to display the headers inside the grid at the top of each children collection,
  • and by allowing displaying the headers at the top of the grid.

In the first case, the grid will have the following look:

Headers Inside The DataGrid

In the second case, the headers will be displayed at the top of the grid.

Headers Outside The DataGrid

We will also allow implement all the alternatives in-between:

  • Display some of the headers inside the grid body and others outside.
  • Display top headers only according to some predefined conditions or rules
  • ...

When hierarchical data is displayed, the user may sometimes find the display confusing. He may have trouble understanding the different levels of the hierarchy. To make hierarchical data more readable, we will allow our grid to display a title at the top of each level. If you watch the two pictures above, you can see the "Countries", "Regions", and "Persons" titles displayed at the top of the headers. Headers and titles are not mandatory. We will be able to choose to display them or not. We will also be able to display the titles but not the headers, or the opposite.

We will also implement the features needed to allow the user to resize the headers.

Out of scoop

We will not discuss the possibility of sorting the data of the grid by clicking on a row header. This feature is more data related than headers related. It is not difficult to add a visual state that displays an up arrow or a down arrow in a header when the user clicks on it. What is more difficult is to apply the corresponding sorting rule to the underlying data. This could be the subject of another tutorial.

2. Preparing the grid

Refactoring the display of the grid

Our data grid is able to display a large amount of complex hierarchical data. We must ensure that the data is presented in the most readable way to the user. Adding headers inside the grid body will add a level of complexity. Therefore, before starting the implementation of the headers, let's make some changes in the way the rows are displayed in order to make the gird more attractive.

Alternate rows color

When setting the AlternateType property of our grid body to the "Items" value, the background of one row out of two is displayed using an alternate color.

Alternate Type

The purpose of this feature is to make the grid more readable. Nevertheless, the alternate colors are too bright and it makes it difficult to read the grid.

In the latest releases of the GOA Toolkit, the brushes and the colors definitions defined at the top of the generic.xaml file of the GOAOpen project have been modified to make alternate colors more sober. Let's modify our generic.xaml file in the same way.

At the top of the generic.xaml file of the GOAOpen project, select the colors definition section. It is the section of the file between the color "tag":

<!--=======================================================================-->
<!--=======================================================================-->
<!--=============================  COLORS =================================-->
<!--=======================================================================-->
<!--=======================================================================-->

and the Standard Silverlight Controls "tag":

<!--======================================================================-->
<!--======================================================================-->
<!--=============== STANDARD SILVERLIGHT CONTROLS ========================-->
<!--======================================================================-->
<!--======================================================================-->

Let's replace this section with the following one:

<!--======================================================================-->
<!--======================================================================-->
<!--=============================  COLORS ================================-->
<!--======================================================================-->
<!--======================================================================-->

<!-- Default -->
<!-- ======= -->
<SolidColorBrush x:Key="DefaultForeground" Color="#FF526168"/>
<Color x:Key="DefaultForegroundColor">#FF526168</Color>

<LinearGradientBrush x:Key="DefaultFocus" 

            EndPoint="1,1" StartPoint="0,0">
    <GradientStop Color="#FF262B2D" Offset="0"/>
    <GradientStop Color="#FF262B2D" Offset="1"/>
</LinearGradientBrush>

<SolidColorBrush x:Key="DefaultShadow" Color="#33272B2D"/>

<SolidColorBrush x:Key="DefaultDisabled" Color="#FFE8E9EA"/>

<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FFD0E0E6"/>

<SolidColorBrush x:Key="DefaultControlBackground" Color="#FFF0F6F7"/>

<LinearGradientBrush x:Key="DefaultStroke" 

               EndPoint="1,1" StartPoint="0,0">
    <GradientStop Color="#FF8096A1" Offset="0"/>
    <GradientStop Color="#FF8096A1" Offset="1"/>
</LinearGradientBrush>

<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFE2ECF1"/>

<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF99B0BB" />

<LinearGradientBrush x:Key="DefaultBackground" 

           EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF81A4BB" Offset="0"/>
    <GradientStop Color="#FFD9EBF7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 

           EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF81A4BB" Offset="0"/>
    <GradientStop Color="#FFD9EBF7" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 

           EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFF9700"/>
    <GradientStop Color="#FFFDCE28" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 

           EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFFF9700"/>
    <GradientStop Color="#FFFDCE28" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 

           EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#CCFFFEED" Offset="0"/>
    <GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 

           EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#CCFFFEED" Offset="0"/>
    <GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 

           EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00044164" Offset="0"/>
    <GradientStop Color="#4C044164" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 

           EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00044164" Offset="0"/>
    <GradientStop Color="#4C044164" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 

           EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FFA8C1D2" Offset="0.3"/>
    <GradientStop Color="#FFCAE0EE" Offset="1"/>
    <GradientStop Color="#FFB3CEE0" Offset="0"/>
</LinearGradientBrush>

<!-- Background:Blue, StandardColor: Blue, ActionColor: Orange -->
<!-- ========================================================= -->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FF526168" />
<Color x:Key="DefaultForegroundColor">#FF526168</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF262B2D" />
<SolidColorBrush x:Key="DefaultShadow" Color="#33272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FFE8E9EA"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FFD0E0E6"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FFF0F6F7"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF8096A1" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFE2ECF1"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF99B0BB" />

<LinearGradientBrush x:Key="DefaultBackground" 
            EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF81A4BB" Offset="0"/>
    <GradientStop Color="#FFD9EBF7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
            EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF81A4BB" Offset="0"/>
    <GradientStop Color="#FFD9EBF7" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
            EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFF9700"/>
    <GradientStop Color="#FFFDCE28" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
            EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFFF9700"/>
    <GradientStop Color="#FFFDCE28" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
            EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#CCFFFEED" Offset="0"/>
    <GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
            EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#CCFFFEED" Offset="0"/>
    <GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
            EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00044164" Offset="0"/>
    <GradientStop Color="#4C044164" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
            EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00044164" Offset="0"/>
    <GradientStop Color="#4C044164" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
            EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFA8C1D2" Offset="0.3"/>
<GradientStop Color="#FFCAE0EE" Offset="1"/>
<GradientStop Color="#FFB3CEE0" Offset="0"/>
</LinearGradientBrush>-->

<!--Background:Beige, StandardColor: Brown, ActionColor: Green-->
<!--==========================================================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FF4B4329" />
<Color x:Key="DefaultForegroundColor">#FF4B4329</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF35302A" />
<SolidColorBrush x:Key="DefaultShadow" Color="#33272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FFD6CC9F"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FFC8C1A3"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FFF4F0E2"/>
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFE7E2C1"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FFC4BDA8" />
<SolidColorBrush x:Key="DefaultStroke" Color="#FFA79F87" />

<LinearGradientBrush x:Key="DefaultBackground" 
            EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFDAD2B1"/>
    <GradientStop Color="#FFE4DBAF" Offset="1"/>
</LinearGradientBrush>
    <LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
            EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFDAD2B1"/>
    <GradientStop Color="#FFE4DBAF" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
            EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF375900"/>
    <GradientStop Color="#FFA9E42B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
            EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF375900"/>
    <GradientStop Color="#FFA9E42B" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
            EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#CCF7E9B9" Offset="0"/>
    <GradientStop Color="#4CF4EFD7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
            EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#CCF7E9B9" Offset="0"/>
    <GradientStop Color="#4CF4EFD7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
            EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00213800" Offset="0"/>
    <GradientStop Color="#33213800" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
            EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00213800" Offset="0"/>
    <GradientStop Color="#33213800" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
            EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FFDAD2B1"/>
    <GradientStop Color="#FFE4DBAF" Offset="1"/>
</LinearGradientBrush>-->


<!--All Grey-->
<!--========-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FF2D2D2D" />
<Color x:Key="DefaultForegroundColor">#FF2D2D2D</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF5E5E5E" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FFE8E9EA"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FFECECEC"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FFF7F7F7"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF888888" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFEAEAEA"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FFAFAFAF" />

<LinearGradientBrush x:Key="DefaultBackground" 
               EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFD4D4D4" Offset="1"/>
    <GradientStop Color="#FFB1B1B1" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
               EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFD4D4D4" Offset="1"/>
    <GradientStop Color="#FFB1B1B1" Offset="0"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
               EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF8F8F8F" Offset="0"/>
    <GradientStop Color="#FF9B9B9B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
               EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF8F8F8F" Offset="0"/>
    <GradientStop Color="#FF9B9B9B" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
               EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#CCFFFFFF"/>
    <GradientStop Color="#19FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
               EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#CCFFFFFF"/>
    <GradientStop Color="#19FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
               EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#66535353" Offset="1"/>
    <GradientStop Color="#00535353"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
               EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#66535353" Offset="1"/>
    <GradientStop Color="#00535353"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
               EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FFE8E8E8"/>
    <GradientStop Color="#FFEAEAEA" Offset="1"/>
    <GradientStop Color="#FFB5B5B5" Offset="0.5"/>
</LinearGradientBrush>-->

<!--Black & White only no grey no color-->
<!--===================================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="Black" />
<Color x:Key="DefaultForegroundColor">Black</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="Black" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="White"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultStroke" Color="Black" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="Black" />

<SolidColorBrush x:Key="DefaultBackground" Color="White" />
<SolidColorBrush x:Key="DefaultBackgroundHorizontal" Color="White" />
<SolidColorBrush x:Key="DefaultReflectVertical" Color="#00FFFFFF" />
<SolidColorBrush x:Key="DefaultReflectHorizontal" Color="#00FFFFFF" />
<SolidColorBrush x:Key="DefaultToolBarBackgroundBrush" Color="White" />
    
<LinearGradientBrush x:Key="DefaultDownColor" 
              EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF000000" Offset="1"/>
    <GradientStop Color="#FF000000" Offset="0.8501"/>
    <GradientStop Color="#00000000" Offset="0.85"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
              EndPoint="0,0" StartPoint="1,0">
   <GradientStop Color="#FF000000" Offset="1"/>
    <GradientStop Color="#FF000000" Offset="0.8501"/>
    <GradientStop Color="#00000000" Offset="0.85"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
              EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF000000" Offset="1"/>
    <GradientStop Color="#FF000000" Offset="0.8501"/>
    <GradientStop Color="#00000000" Offset="0.85"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
              EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#FF000000" Offset="1"/>
    <GradientStop Color="#FF000000" Offset="0.8501"/>
    <GradientStop Color="#00000000" Offset="0.85"/>
</LinearGradientBrush>-->

<!--Black-->
<!--=====-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FFECECEC" />
<Color x:Key="DefaultForegroundColor">#FFECECEC</Color>
<SolidColorBrush x:Key="DefaultShadow" Color="Transparent"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FF1A1A1A"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FF454545"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FF3D3D3D"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF373737" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FF626262"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF606060" />

<LinearGradientBrush x:Key="DefaultFocus" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFFFFFF"/>
    <GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackground" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF6C6C6C"/>
    <GradientStop Color="#FF373737" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF6C6C6C"/>
    <GradientStop Color="#FF373737" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFB90700"/>
    <GradientStop Color="#FFFF3A00" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFB90700"/>
    <GradientStop Color="#FFFF3A00" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#7FFFFFFF" Offset="0"/>
    <GradientStop Color="#19FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#7FFFFFFF" Offset="0"/>
    <GradientStop Color="#19FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00535353" Offset="0"/>
    <GradientStop Color="#4CF9F9F9" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00535353" Offset="0"/>
    <GradientStop Color="#4CF9F9F9" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF494949" Offset="0.424"/>
    <GradientStop Color="#FF494949" Offset="1"/>
    <GradientStop Color="#FF7A7A7A" Offset="0"/>
</LinearGradientBrush>-->

<!--White & Ice blue-->
<!--================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FF3F3F3F" />
<Color x:Key="DefaultForegroundColor">#FF3F3F3F</Color>
<SolidColorBrush x:Key="DefaultShadow" Color="Transparent"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FFE4E4E4"/>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF000000"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FFA1A1A1" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFF2F2F2"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FFC6C6C6" />
    
<LinearGradientBrush x:Key="DefaultBackground" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFEAEAEA"/>
    <GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFEAEAEA"/>
    <GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF2E99C1"/>
    <GradientStop Color="#FF5EC3F2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF2E99C1"/>
    <GradientStop Color="#FF5EC3F2" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#B2FFFFFF" Offset="0"/>
    <GradientStop Color="#4CFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#B2FFFFFF" Offset="0"/>
    <GradientStop Color="#4CFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#005E5E5E" Offset="0"/>
    <GradientStop Color="#4C5C5C5C" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#005E5E5E" Offset="0"/>
    <GradientStop Color="#4C5C5C5C" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="DefaultToolBarBackgroundBrush" Color="White" />-->

<!--Grey Blue, Vista colors-->
<!--=======================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="Black" />
<Color x:Key="DefaultForegroundColor">Black</Color>
<SolidColorBrush x:Key="DefaultShadow" Color="Transparent"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF000000"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF707070" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFF2F2F2"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FFC6C6C6" />

<LinearGradientBrush x:Key="DefaultBackground" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFCFCFCF"/>
    <GradientStop Color="#FFDDDDDD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFCFCFCF"/>
    <GradientStop Color="#FFDDDDDD" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
              EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF68B3DB"/>
    <GradientStop Color="#FF98D1EF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
              EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF68B3DB"/>
    <GradientStop Color="#FF98D1EF" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
              EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#B2FFFFFF" Offset="0"/>
    <GradientStop Color="#4CFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
              EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#B2FFFFFF" Offset="0"/>
    <GradientStop Color="#4CFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
              EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#005E5E5E" Offset="0"/>
    <GradientStop Color="#4C5C5C5C" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
              EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#005E5E5E" Offset="0"/>
    <GradientStop Color="#4C5C5C5C" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="DefaultToolBarBackgroundBrush" Color="White" />-->

<!--Grey / Yellow, Low reflect-->
<!--==========================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FF4E4E4E" />
<Color x:Key="DefaultForegroundColor">#FF4E4E4E</Color>
<SolidColorBrush x:Key="DefaultShadow" Color="Transparent"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF3F3F3F"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FFE9E9E9"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFE9E9E9"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FFD2D2D2" />

<LinearGradientBrush x:Key="DefaultStroke" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFCCCCCC"/>
    <GradientStop Color="#FF919191" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackground" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFECECEC"/>
    <GradientStop Color="#FFAFAFAF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFECECEC"/>
    <GradientStop Color="#FFAFAFAF" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFFE588"/>
    <GradientStop Color="#FFFDC500" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFFFE588"/>
    <GradientStop Color="#FFFDC500" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#4CFFFFFF" Offset="0"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#4CFFFFFF" Offset="0"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#005E5E5E" Offset="0"/>
    <GradientStop Color="#4C5C5C5C" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
   <GradientStop Color="#005E5E5E" Offset="0"/>
    <GradientStop Color="#4C5C5C5C" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="DefaultToolBarBackgroundBrush" Color="#FFF2F2F2" />-->

<!--Grey / Blue reflect inverted, multi gradient-->
<!--============================================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FF4E4E4E" />
<Color x:Key="DefaultForegroundColor">#FF4E4E4E</Color>
<SolidColorBrush x:Key="DefaultShadow" Color="Transparent"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF3F3F3F"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FFE9E9E9"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="White"/>
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFE9E9E9"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FFD2D2D2" />

<LinearGradientBrush x:Key="DefaultStroke" 
              EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFCCCCCC"/>
    <GradientStop Color="#FF919191" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackground" 
              EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFB9B9B9"/>
    <GradientStop Color="#FFB9B9B9" Offset="1"/>
    <GradientStop Color="#FFD8D8D8" Offset="0.924"/>
    <GradientStop Color="#FFD8D8D8" Offset="0.062"/>
    <GradientStop Color="#FFFFFFFF" Offset="0.415"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
              EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFB9B9B9"/>
    <GradientStop Color="#FFB9B9B9" Offset="1"/>
    <GradientStop Color="#FFD8D8D8" Offset="0.924"/>
    <GradientStop Color="#FFD8D8D8" Offset="0.062"/>
    <GradientStop Color="#FFFFFFFF" Offset="0.415"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
              EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFD08400" Offset="0"/>
    <GradientStop Color="#FFD08400" Offset="1"/>
    <GradientStop Color="#FFF09900" Offset="0.075999997556209564"/>
    <GradientStop Color="#FFF09900" Offset="0.924"/>
    <GradientStop Color="#FFFBCB21" Offset="0.54000002145767212"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
              EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFD08400" Offset="0"/>
    <GradientStop Color="#FFD08400" Offset="1"/>
    <GradientStop Color="#FFF09900" Offset="0.075999997556209564"/>
    <GradientStop Color="#FFF09900" Offset="0.924"/>
    <GradientStop Color="#FFFBCB21" Offset="0.54000002145767212"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#33FFFFFF" Offset="0"/>
    <GradientStop Color="#7FFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#33FFFFFF" Offset="0"/>
    <GradientStop Color="#7FFFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#2D000000" Offset="1"/>
    <GradientStop Color="#19232323" Offset="0.87"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
   <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#2D000000" Offset="1"/>
    <GradientStop Color="#19232323" Offset="0.87"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="DefaultToolBarBackgroundBrush" Color="#FFF2F2F2" />-->

<!--Dark Grey Minimal-->
<!--=================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FFC1C1C1" />
<Color x:Key="DefaultForegroundColor">#FFC1C1C1</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF656565" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FF1C1C1C"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FF434343"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FF3D3D3D"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF292929" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FF535353"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF292929" />

<LinearGradientBrush x:Key="DefaultBackground" 
          EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF494949" Offset="0"/>
    <GradientStop Color="#FF494949" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
          EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF494949" Offset="0"/>
    <GradientStop Color="#FF494949" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
          EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF313131"/>
    <GradientStop Color="#FF313131" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
          EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF313131"/>
    <GradientStop Color="#FF313131" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
          EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00FFFEED" Offset="0"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
          EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00FFFEED" Offset="0"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
          EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#26FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
          EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#26FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
          EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF3D3D3D" Offset="0.3"/>
    <GradientStop Color="#FF3D3D3D" Offset="1"/>
    <GradientStop Color="#FF3D3D3D" Offset="0"/>
</LinearGradientBrush>-->

<!--Dark Red Grey Selected-->
<!--======================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FF111111" />
<Color x:Key="DefaultForegroundColor">#FF111111</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="#FF000000" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FF494949"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FF2D2D2D"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FF6E6E6E"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF310000" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FF525252"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF383838" />

<LinearGradientBrush x:Key="DefaultBackground" 
           EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFD61414"/>
    <GradientStop Color="#FF660A0A" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
           EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFD61414"/>
    <GradientStop Color="#FF660A0A" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
           EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF666666"/>
    <GradientStop Color="#FF666666" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
           EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF666666"/>
    <GradientStop Color="#FF666666" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
           EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#26FFFFFF" Offset="1"/>
    <GradientStop Color="#4CFFFFFF" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
           EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#26FFFFFF" Offset="1"/>
    <GradientStop Color="#4CFFFFFF" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
           EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
           EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
           EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF6A6A6A" Offset="0"/>
    <GradientStop Color="#FF414141" Offset="1"/>
</LinearGradientBrush>-->

<!--Blue-->
<!--====-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FFFFFFFF" />
<Color x:Key="DefaultForegroundColor">#FFFFFFFF</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FF213957"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FF606060"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FF919191"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF273341" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FFA5A5A5"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF515151" />

<LinearGradientBrush x:Key="DefaultBackground" 
               EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF153057"/>
    <GradientStop Color="#FF153057" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
               EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF153057"/>
    <GradientStop Color="#FF153057" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
               EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF00A3FF"/>
    <GradientStop Color="#FF002D4D" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
               EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF00A3FF"/>
    <GradientStop Color="#FF002D4D" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
               EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#26FFFFFF" Offset="1"/>
    <GradientStop Color="#7FFFFFFF" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
               EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#26FFFFFF" Offset="1"/>
    <GradientStop Color="#7FFFFFFF" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
               EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34000000" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
               EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34000000" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
               EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF052841" Offset="0"/>
    <GradientStop Color="#FF052841" Offset="1"/>
</LinearGradientBrush>-->

<!--Black Selected-->
<!--==============-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="White" />
<Color x:Key="DefaultForegroundColor">White</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="White" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FF767870"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FF2F2F2F"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FF4A4A4A"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FF313131" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FF2F2F2F"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF3A3A3A" />

<LinearGradientBrush x:Key="DefaultBackground" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF9E9F7E" Offset="0"/>
    <GradientStop Color="#FF373737" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF9E9F7E" Offset="0"/>
    <GradientStop Color="#FF373737" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF3D3D3D"/>
    <GradientStop Color="#FF060606" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF3D3D3D"/>
    <GradientStop Color="#FF060606" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <GradientStop Color="#19FFFFFF" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <GradientStop Color="#19FFFFFF" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF828169" Offset="0"/>
    <GradientStop Color="#FF4B4A3C" Offset="1"/>
</LinearGradientBrush>-->

<!--Purple & Grey-->
<!--=============-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FFFFFFFF" />
<Color x:Key="DefaultForegroundColor">#FFFFFFFF</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="White" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FF727272"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FFA9A9A9"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FFB9B9B9"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#FFDADADA" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FF979797"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FFDADADA" />

<LinearGradientBrush x:Key="DefaultBackground" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF7E7E7E" Offset="0"/>
    <GradientStop Color="#FF7E7E7E" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF7E7E7E" Offset="0"/>
    <GradientStop Color="#FF7E7E7E" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
             EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF2D162F"/>
    <GradientStop Color="#FF551A5C" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
             EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF2D162F"/>
    <GradientStop Color="#FF551A5C" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#99FFFFFF" Offset="0"/>
    <GradientStop Color="#26FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#99FFFFFF" Offset="0"/>
    <GradientStop Color="#26FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
             EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#34FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
             EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF8F8F8F" Offset="0"/>
    <GradientStop Color="#FF8F8F8F" Offset="1"/>
</LinearGradientBrush>-->

<!--Dark Grey + Fire selected-->
<!--=========================-->
<!--<SolidColorBrush x:Key="DefaultForeground" Color="#FFFFFFFF" />
<Color x:Key="DefaultForegroundColor">#FFFFFFFF</Color>
<SolidColorBrush x:Key="DefaultFocus" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="DefaultShadow" Color="#00272B2D"/>
<SolidColorBrush x:Key="DefaultDisabled" Color="#FF727272"/>
<SolidColorBrush x:Key="DefaultScrollBackground" Color="#FF8A8778"/>
<SolidColorBrush x:Key="DefaultControlBackground" Color="#FFA19E8B"/>
<SolidColorBrush x:Key="DefaultStroke" Color="#66FFFFFF" />
<SolidColorBrush x:Key="DefaultAlternativeBackground" Color="#FF8D8972"/>
<SolidColorBrush x:Key="DefaultListControlStroke" Color="#FF535353" />

<LinearGradientBrush x:Key="DefaultBackground" 
              EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF7A7A7A" Offset="0"/>
    <GradientStop Color="#FF242424" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultBackgroundHorizontal" 
              EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FF7A7A7A" Offset="0"/>
    <GradientStop Color="#FF242424" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultDownColor" 
              EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFF99502"/>
    <GradientStop Color="#FFCA4E20" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDownColorHorizontal" 
              EndPoint="0,0" StartPoint="1,0">
    <GradientStop Color="#FFF99502"/>
    <GradientStop Color="#FFCA4E20" Offset="1"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultReflectVertical" 
              EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="0"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultReflectHorizontal" 
              EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="0"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomVertical" 
              EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="0"/>
    <GradientStop Color="#64C8C8C8" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultDarkGradientBottomHorizontal" 
              EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="0"/>
    <GradientStop Color="#64C8C8C8" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultToolBarBackgroundBrush" 
              EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#FF555450" Offset="1"/>
    <GradientStop Color="#FF848372" Offset="0"/>
</LinearGradientBrush>-->

Extended parent node backcolor

When we built the Container_RowNodeStyle style (the style used by our rows when the grid displays hierarchical data), we have used the existing Container_NodeStyle style of the GoaOpen project and we have enhanced it a little bit in order that it fits our needs. The result style displays the background of the nodes in a different way when they are extended and collapsed.

Extended Parent Node BackColor

We will remove this behavior because it adds confusion when it is used in a complex control like a gird.

Let's also increase the Indentation default value to 30 and change the margins of ValidElement and the FocusElement to make them more readable.

Locate the Container_RowNodeStyle style at the end of the generic.xaml file and replace the style with this one:

<Style x:Key="Container_RowNodeStyle" TargetType="o:HandyListItem">
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Foreground" Value="{StaticResource DefaultForeground}"/>
    <Setter Property="Background" Value="{StaticResource DefaultControlBackground}" />
    <Setter Property="FontSize" Value="11" />
    <Setter Property="Indentation" Value="10" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="IsKeyActivable" Value="True"/>
    <Setter Property="ItemUnpressDropDownBehavior" Value="CloseAll" />
    <Setter Property="BorderBrush" Value="{StaticResource DefaultListControlStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Indentation" Value="30"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="o:HandyListItem">
                <Grid x:Name="LayoutRoot">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="ELEMENT_ContentPresenter" 

                                        Storyboard.TargetProperty="Opacity" 

                                        To="0.6"/>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="SelectedVisual" 

                                        Storyboard.TargetProperty="Opacity" 

                                        To="0.6"/>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="SelectedReflectVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="HasItem" 

                                        Storyboard.TargetProperty="Opacity" 

                                        To="0.6"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="NotFocused"/>
                            <vsm:VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="FocusVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="MouseOverStates">
                            <vsm:VisualState x:Name="NotMouseOver"/>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="MouseOverVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="PressedStates">
                            <vsm:VisualState x:Name="NotPressed"/>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="PressedVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectedStates">
                            <vsm:VisualState x:Name="NotSelected"/>
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="SelectedVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="HasItemsStates">
                            <vsm:VisualState x:Name="NotHasItems"/>
                            <vsm:VisualState x:Name="HasItems">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="HasItem" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="IsExpandedStates">
                            <vsm:VisualState x:Name="NotIsExpanded"/>
                            <vsm:VisualState x:Name="IsExpanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="CheckedArrow" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ArrowUnchecked" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="AlternateStates">
                            <vsm:VisualState x:Name="NotIsAlternate"/>
                            <vsm:VisualState x:Name="IsAlternate">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="AlternateBackgroundVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="BackgroundVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="InvertedStates">
                            <vsm:VisualState x:Name="InvertedItemsFlowDirection">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ArrowCheckedToTop" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ArrowCheckedToBottom" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="NormalItemsFlowDirection"/>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidStates">
                            <vsm:VisualState x:Name="Valid"/>
                            <vsm:VisualState x:Name="NotValid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ValidElement" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <StackPanel Orientation="Horizontal" >
                        <Rectangle Width="{TemplateBinding FullIndentation}" />
                        <Grid MinWidth="22" Margin="0,0,1,0">
                            <Grid x:Name="HasItem" 

                                  Visibility="Collapsed" 

                                  Height="16" Width="16" 

                                  Margin="0,0,0,0"

                                  VerticalAlignment="Bottom">
                                <Path x:Name="ArrowUnchecked" 

                                  HorizontalAlignment="Right" 

                                  Height="8" Width="8" 

                                  Fill="{StaticResource DefaultForeground}" 

                                  Stretch="Fill" 

                                  Data="M 4 0 L 8 4 L 4 8 Z" />
                                <Grid x:Name="CheckedArrow" Visibility="Collapsed">
                                    <Path x:Name="ArrowCheckedToTop" 

                                      HorizontalAlignment="Right" 

                                      Height="8" Width="8" 

                                      Fill="{StaticResource DefaultForeground}" 

                                      Stretch="Fill" 

                                      Data="M 8 4 L 0 4 L 4 0 z" 

                                      Visibility="Collapsed"/>
                                    <Path x:Name="ArrowCheckedToBottom" 

                                      HorizontalAlignment="Right" 

                                      Height="8" Width="8" 

                                      Fill="{StaticResource DefaultForeground}" 

                                      Stretch="Fill" 

                                      Data="M 0 4 L 8 4 L 4 8 Z" />
                                </Grid>
                                <ToggleButton 

                                  x:Name="ELEMENT_ExpandButton" 

                                  Height="16" Width="16"  

                                  Style="{StaticResource EmptyToggleButtonStyle}" 

                                  IsChecked="{TemplateBinding IsExpanded}" 

                                  IsThreeState="False" IsTabStop="False"/>
                            </Grid>
                        </Grid>
                        <g:GDockPanel Background="Transparent">
                            <Grid g:GDockPanel.Dock="Fill">
                                <Border x:Name="BackgroundVisual" 

                                    Background="{TemplateBinding Background}" />
                                <Rectangle 

                                   Fill="{StaticResource DefaultAlternativeBackground}" 

                                   x:Name="AlternateBackgroundVisual" 

                                   Visibility="Collapsed"/>
                                <Grid x:Name="SelectedVisual" 

                                  Visibility="Collapsed" >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="1*"/>
                                        <RowDefinition Height="1*"/>
                                    </Grid.RowDefinitions>
                                    <Rectangle Fill="{StaticResource DefaultDownColor}" 

                                           Grid.RowSpan="2"/>
                                    <Rectangle 

                                       x:Name="SelectedReflectVisual" 

                                       Fill="{StaticResource DefaultReflectVertical}" 

                                       Margin="0,1,1,0" 

                                       RadiusX="1" RadiusY="1"/>
                            </Grid>
                            <Rectangle 

                               x:Name="MouseOverVisual" 

                               Fill="{StaticResource 
                                      DefaultDarkGradientBottomVertical}" 

                               Visibility="Collapsed" Margin="0,0,1,0"/>
                            <Grid x:Name="PressedVisual" Visibility="Collapsed">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="1*"/>
                                    <RowDefinition Height="1*"/>
                                </Grid.RowDefinitions>
                                <Rectangle 

                                    Fill="{StaticResource DefaultDownColor}" 

                                    Grid.RowSpan="2"/>
                                <Rectangle 

                                    Fill="{StaticResource 
                                           DefaultDarkGradientBottomVertical}" 

                                    Grid.Row="1" Margin="0,0,1,0"/>
                                <Rectangle 

                                    Fill="{StaticResource DefaultReflectVertical}" 

                                    Margin="0,1,1,0" 

                                    RadiusX="1" RadiusY="1"/>
                            </Grid>
                                <Rectangle 

                                   HorizontalAlignment="Stretch" 

                                   VerticalAlignment="Top" 

                                   Stroke="{TemplateBinding BorderBrush}" 

                                   StrokeThickness="0.5" 

                                   Height="1"/>
                                <Rectangle 

                                   Name="ValidElement" 

                                   Stroke="Red" 

                                   StrokeThickness="1.5"

                                   IsHitTestVisible="false" 

                                   Visibility="Collapsed"

                                   Margin="1,2,2,1"/>
                                <Rectangle 

                                   x:Name="FocusVisual" 

                                   Stroke="{StaticResource DefaultFocus}" 

                                   StrokeDashCap="Round" Margin="1,2,2,1" 

                                   StrokeDashArray=".2 2" 

                                   Visibility="Collapsed"/>
                                <g:GContentPresenter

                                  x:Name="ELEMENT_ContentPresenter"

                                  Content="{TemplateBinding Content}"

                                  ContentTemplate="{TemplateBinding ContentTemplate}"

                                  Cursor="{TemplateBinding Cursor}"

                                  OrientatedHorizontalAlignment=
                                    "{TemplateBinding HorizontalContentAlignment}"

                                  OrientatedMargin="{TemplateBinding Padding}"

                                  OrientatedVerticalAlignment=
                                    "{TemplateBinding VerticalContentAlignment}" 

                                  PresenterOrientation=
                                    "{TemplateBinding PresenterOrientation}"/>
                                <Rectangle 

                                   x:Name="BorderElement" 

                                   Stroke="{TemplateBinding BorderBrush}" 

                                   StrokeThickness="{TemplateBinding BorderThickness}" 

                                   Margin="-1,0,0,-1"/>
                            </Grid>
                        </g:GDockPanel>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Separator between parent's nodes and children

Parent and children nodes are displayed using different indentations in order that the hierarchy of the data is visually displayed inside the grid. Nevertheless, we would like to make the distinction between a parent and its children more accentuated by adding a space between them.

In order to implement that feature, we can use the "NodeLevelActionStates" states of the items (i.e., the rows) displayed in our grid. When a node is the first node of a new level in the hierarchy, its NodeLevelActionStates state is "JumpLevelNode". Otherwise, its NodeLevelActionStates state is "NormalLevelNode".

Alternate Type

Let's use these states to display a space on the top of an item when the item is the first one of a new level in the hierarchy.

In the Container_RowNodeStyle style, at the end of VisualStateManager.VisualStateGroups, let's add a new VisualStateGroup:

<vsm:VisualStateGroup x:Name="NodeLevelActionStates">
    <vsm:VisualState x:Name="NormalLevelNode"/>
    <vsm:VisualState x:Name="JumpLevelNode">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames 

                Storyboard.TargetName="NodeSpacerRectangle" 

                Storyboard.TargetProperty="Visibility" 

                Duration="0">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </vsm:VisualState>
</vsm:VisualStateGroup>

Let's add an invisible rectangle that will be displayed at the top of the item and that will create the space between it and the previous item. In order to do that, we are going to add two rows to the "LayoutRoot" grid of the item. The first row holds the invisible rectangle, and the second row holds the StackPanel of the item.

</vsm:VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="NodeSpacerRectangle" Height="6" 

           Grid.Row="0" Visibility="Collapsed"/>
<StackPanel Orientation="Horizontal" Grid.Row="1">
    <Rectangle Width="{TemplateBinding FullIndentation}" />
    <Grid MinWidth="22" Margin="0,0,1,0">

Remove animations

When displaying simple controls, animations are great. Nevertheless, for advanced controls as our data grid, especially when it is displaying complex hierarchical data with inside headers, the rendering of animations within Silverlight is too slow, and the result is not attractive. Therefore, we will just remove the animations for now.

Locate the GridBodyStyle style at the end of the generic.xaml file.

Modify the ItemsPanelModel setter in order to remove the ChildrenAnimator of the GStackPanelModel:

<Setter Property="ItemsPanelModel">
    <Setter.Value>
        <g:GStackPanelModel>
            <g:GStackPanelModel.KeyNavigator>
                <o:GridSpatialNavigator/>
            </g:GStackPanelModel.KeyNavigator>
        </g:GStackPanelModel>
    </Setter.Value>
</Setter>

TextCell and CheckBoxCell

The text of TextCell is too close to the border of the cell. Let's modify the padding of the cell to make the text more readable.

Let's also change the margins of the focus element to make it more visible.

<Style TargetType="o:TextCell">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{StaticResource DefaultListControlStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{StaticResource DefaultForeground}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="Padding" Value="5,4,4,4" />
    <Setter Property="Width" Value="100"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="o:TextCell">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Standard"/>
                            <vsm:VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                    Storyboard.TargetName="FocusElement" 

                                    Storyboard.TargetProperty="Visibility" 

                                    Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Edited">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                             Storyboard.TargetName="TextElement" 

                                             Storyboard.TargetProperty="Visibility" 

                                             Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                    Storyboard.TargetName="FocusElement" 

                                    Storyboard.TargetProperty="Visibility" 

                                    Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidStates">
                            <vsm:VisualState x:Name="Valid"/>
                            <vsm:VisualState x:Name="NotValid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ValidElement" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Rectangle 

                        Name="ValidElement" 

                        Stroke="Red"

                        StrokeThickness="1.5"

                        IsHitTestVisible="false" 

                        Visibility="Collapsed"

                        Margin="1,2,2,1" />
                    <Grid x:Name="TextContainerElement">
                        <TextBlock 

                        x:Name="TextElement" 

                        Text="{TemplateBinding Text}"

                        Margin="{TemplateBinding Padding}"

                        HorizontalAlignment=
                          "{TemplateBinding HorizontalContentAlignment}"

                        VerticalAlignment=
                          "{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <Rectangle Name="FocusElement" 

                           Stroke="{StaticResource DefaultFocus}" 

                           StrokeThickness="1" 

                           IsHitTestVisible="false" 

                           StrokeDashCap="Round" 

                           Margin="1,2,2,1" 

                           StrokeDashArray=".2 2" 

                           Visibility="Collapsed" />
                    <Rectangle Name="CellRightBorder" 

                           Stroke="{TemplateBinding BorderBrush}" 

                           StrokeThickness="0.5" 

                           Width="1" 

                           HorizontalAlignment="Right"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The CheckBoxCell is too sophisticated. Let's simplify it to make it more readable and faster to be rendered.

<Style TargetType="o:CheckBoxCell">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="{StaticResource DefaultListControlStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{StaticResource DefaultForeground}"/>
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="Width" Value="21"/>
    <Setter Property="Padding" Value="4,4,5,4"/>
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="o:CheckBoxCell">
                <Grid Background="Transparent">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Standard"/>
                            <vsm:VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                    Storyboard.TargetName="focusElement" 

                                    Storyboard.TargetProperty="Visibility" 

                                    Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Edited">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                    Storyboard.TargetName="focusElement" 

                                    Storyboard.TargetProperty="Visibility" 

                                    Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidStates">
                            <vsm:VisualState x:Name="Valid"/>
                            <vsm:VisualState x:Name="NotValid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                    Storyboard.TargetName="ValidElement" 

                                    Storyboard.TargetProperty="Visibility" 

                                    Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Rectangle Name="ValidElement" 

                           Stroke="Red" 

                           StrokeThickness="2"

                           Margin="1,2,2,1" 

                           IsHitTestVisible="false"

                           Visibility="Collapsed"/>
                    <Grid HorizontalAlignment=
                                "{TemplateBinding HorizontalContentAlignment}">
                        <Border 

                        x:Name="BackgroundVisual" 

                        Background="{TemplateBinding Background}" 

                        Height="12" 

                        Width="12" 

                        BorderBrush="{TemplateBinding BorderBrush}" 

                        CornerRadius="1" 

                        BorderThickness="{TemplateBinding BorderThickness}"

                        Margin="{TemplateBinding Padding}"/>
                        <Grid 

                        x:Name="CheckMark" 

                        Width="9" 

                        Height="9" 

                        Visibility="{TemplateBinding CheckMarkVisibility}" >
                            <Path 

                        Stretch="Fill" 

                        Stroke="{TemplateBinding Foreground}" 

                        StrokeThickness="2" 

                        Data="M129.13295,140.87834 L132.875,145 L139.0639,137" />
                        </Grid>                            
                    </Grid>
                    <Rectangle 

                            Name="focusElement" 

                            Stroke="{StaticResource DefaultFocus}" 

                            StrokeThickness="1" 

                            Fill="{TemplateBinding Background}" 

                            IsHitTestVisible="false" 

                            StrokeDashCap="Round" 

                            Margin="1,2,2,1" 

                            StrokeDashArray=".2 2" 

                            Visibility="Collapsed" />
                    <Rectangle 

                        Name="CellRightBorder" 

                        Stroke="{TemplateBinding BorderBrush}" 

                        StrokeThickness="0.5" 

                        Width="1" 

                        HorizontalAlignment="Right"

                        Margin="0,-1,0,-1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Container_RowItemStyle

Let's apply the same kind of changes to Container_RowItemStyle to make it more readable. We are going to modify the SelectedVisual, ReflectVisual, ValidElement, and FocusVisual margins.

<Style x:Key="Container_RowItemStyle" TargetType="o:HandyListItem">
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Background" 

       Value="{StaticResource DefaultControlBackground}" />
    <Setter Property="Foreground" 

       Value="{StaticResource DefaultForeground}"/>
    <Setter Property="FontSize" Value="11" />
    <Setter Property="Indentation" Value="10" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="IsKeyActivable" Value="True"/>
    <Setter Property="ItemUnpressDropDownBehavior" Value="CloseAll" />
    <Setter Property="BorderBrush" 

       Value="{StaticResource DefaultListControlStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="o:HandyListItem">
                <Grid Background="Transparent" x:Name="LayoutRoot">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="ELEMENT_ContentPresenter" 

                                        Storyboard.TargetProperty="Opacity" To="0.6"/>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="SelectedVisual" 

                                        Storyboard.TargetProperty="Opacity" To="0.6"/>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="ReflectVisual" 

                                        Storyboard.TargetProperty="Opacity" To="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="NotFocused"/>
                            <vsm:VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="FocusVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="MouseOverStates">
                            <vsm:VisualState x:Name="NotMouseOver"/>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="MouseOverVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="PressedStates">
                            <vsm:VisualState x:Name="NotPressed"/>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="PressedVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectedStates">
                            <vsm:VisualState x:Name="NotSelected"/>
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="SelectedVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ReflectVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="AlternateStates">
                            <vsm:VisualState x:Name="NotIsAlternate"/>
                            <vsm:VisualState x:Name="IsAlternate">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="AlternateBackgroundVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="BackgroundVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="OrientationStates">
                            <vsm:VisualState x:Name="Horizontal"/>
                            <vsm:VisualState x:Name="Vertical"/>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidStates">
                            <vsm:VisualState x:Name="Valid"/>
                            <vsm:VisualState x:Name="NotValid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ValidElement" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*"/>
                            <RowDefinition Height="1*"/>
                        </Grid.RowDefinitions>
                        <Border x:Name="BackgroundVisual" 

                            Background="{TemplateBinding Background}" 

                            Grid.RowSpan="2" />
                        <Border x:Name="AlternateBackgroundVisual" 

                            Background="{StaticResource 
                                         DefaultAlternativeBackground}" 

                            Grid.RowSpan="2" 

                            Visibility="Collapsed"/>
                        <Rectangle x:Name="SelectedVisual" 

                               Fill="{StaticResource DefaultDownColor}" 

                               Grid.RowSpan="2" 

                                Margin="0,0,1,0"

                               Visibility="Collapsed"/>
                        <Rectangle x:Name="MouseOverVisual" 

                               Fill="{StaticResource 
                                      DefaultDarkGradientBottomVertical}" 

                               Grid.RowSpan="2" 

                               Margin="0,0,1,0"

                               Visibility="Collapsed"/>
                        <Grid x:Name="PressedVisual" 

                          Visibility="Collapsed" 

                          Grid.RowSpan="2" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="1*"/>
                                <RowDefinition Height="1*"/>
                            </Grid.RowDefinitions>
                            <Rectangle 

                                Fill="{StaticResource 
                                       DefaultDarkGradientBottomVertical}" 

                                Grid.Row="1" 

                                Margin="0,0,1,0" />
                        </Grid>
                        <Rectangle 

                            x:Name="ReflectVisual" 

                            Fill="{StaticResource DefaultReflectVertical}" 

                            Margin="0,1,1,0" 

                            Visibility="Collapsed"/>
                        <Rectangle Name="ValidElement" 

                               Stroke="Red" 

                               StrokeThickness="1.5"

                               IsHitTestVisible="false" 

                               Visibility="Collapsed"

                               Margin="1,2,2,1"

                               Grid.RowSpan="2"/>
                        <Rectangle 

                            x:Name="FocusVisual" 

                            Grid.RowSpan="2" 

                            Stroke="{StaticResource DefaultFocus}" 

                            StrokeDashCap="Round" 

                            Margin="2,2,2,1" 

                            StrokeDashArray=".2 2" 

                            Visibility="Collapsed"/>
                        <!-- Item content -->
                        <g:GContentPresenter

                          Grid.RowSpan="2" 

                          x:Name="ELEMENT_ContentPresenter"

                          Content="{TemplateBinding Content}"

                          ContentTemplate="{TemplateBinding ContentTemplate}"

                          OrientatedHorizontalAlignment=
                            "{TemplateBinding HorizontalContentAlignment}"

                          OrientatedMargin="{TemplateBinding Padding}"

                          OrientatedVerticalAlignment=
                            "{TemplateBinding VerticalContentAlignment}"  

                          PresenterOrientation=
                            "{TemplateBinding PresenterOrientation}"/>
                        <Rectangle x:Name="BorderElement" 

                               Grid.RowSpan="2" 

                               Stroke="{TemplateBinding BorderBrush}" 

                               StrokeThickness=
                                 "{TemplateBinding BorderThickness}" 

                               Margin="-1,0,0,-1"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Data samples

Until now, in our GridBody project, we have generated our data using a loop. This was an easy way to have data to display in the grid. Let's enhance the way we generate the data to have something more close to the real data that can be displayed inside a grid.

Let's suppose that we run an international company that has employees all across the world. Each employee has a rate. We would like the grid to display the following hierarchy:

Countries
    Regions
        Employees

For each country and region, the grid must display the total rate, which is the sum of the rates of all the employees of the country or the region.

New Hierarchy

Let's first modify the Person class of our GridBody project.

using Open.Windows.Controls;
using System;

namespace GridBody
{
    public class Person : ContainerDataItem
    {
        public Person(string id, string firstName, string lastName, 
                      string address, string city, string zipCode, 
                      string stateID, string countryID, 
                      double rate, bool isCustomer)
        {
            this.firstName = firstName;
            this.lastName = lastName;
            this.address = address;
            this.city = city;
            this.zipCode = zipCode;
            this.isCustomer = isCustomer;
            this.stateID = stateID;
            this.rate = rate;
        }

        private string firstName;
        public string FirstName
        {
            get { return firstName; }
            set
            {
                if (firstName != value)
                {
                    firstName = value;
                    OnPropertyChanged("FirstName");
                }
            }
        }

        private string lastName;
        public string LastName
        {
            get { return lastName; }
            set
            {
                if (lastName != value)
                {
                    if (string.IsNullOrEmpty(value))
                        throw new Exception("Last name cannot be empty");

                    lastName = value;
                    OnPropertyChanged("LastName");
                }
            }
        }

        private string address;
        public string Address
        {
            get { return address; }
            set
            {
                if (address != value)
                {
                    address = value;
                    OnPropertyChanged("Address");
                }
            }
        }

        private string city;
        public string City
        {
            get { return city; }
            set
            {
                if (city != value)
                {
                    city = value;
                    OnPropertyChanged("City");
                }
            }
        }

        private string zipCode;
        public string ZipCode
        {
            get { return zipCode; }
            set
            {
                if (zipCode != value)
                {
                    zipCode = value;
                    OnPropertyChanged("ZipCode");
                }
            }
        }

        private bool isCustomer;
        public bool IsCustomer
        {
            get { return isCustomer; }
            set
            {
                if (isCustomer != value)
                {
                    isCustomer = value;
                    OnPropertyChanged("IsCustomer");
                }
            }
        }

        private string stateID;
        public string StateID
        {
            get { return stateID; }
            set
            {
                if (stateID != value)
                {
                    stateID = value;
                    OnPropertyChanged("StateID");
                }
            }
        }

        private double rate;
        public double Rate
        {
            get { return rate; }
            set
            {
                if (rate != value)
                {
                    rate = value;
                    OnPropertyChanged("Rate");
                }
            }
        }

        public bool Validate()
        {
            int zipCodeValue = 0;
            int.TryParse(zipCode, out zipCodeValue);
            if ((city.ToUpper() == "NEW YORK") && 
                ((zipCodeValue < 10001) || (zipCodeValue > 10292)))
                return false;

            return true;
        }       
    }
}

Let's add a new StateProvince class:

using Open.Windows.Controls;
using System.Collections.Specialized;

namespace GridBody
{
    public class StateProvince : ContainerDataItem
    {
        public StateProvince(string code, string name, string countryRegionCode)
        {
            this.name = name;
            this.code = code;
            this.countryRegionCode = countryRegionCode;
            this.Children.CollectionChanged += new 
              System.Collections.Specialized.
              GNotifyCollectionChangedEventHandler(Children_CollectionChanged);

        }

        void Children_CollectionChanged(object sender, 
             System.Collections.Specialized.GNotifyCollectionChangedEventArgs e)
        {
            switch (e.Action)
            {
                case GNotifyCollectionChangedAction.Add:
                    foreach (Person person in e.NewItems)
                    {
                        person.PropertyChanged += new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(person_PropertyChanged);
                        this.Rate += person.Rate;
                    }

                    break;

                case GNotifyCollectionChangedAction.Remove:
                    foreach (Person person in e.OldItems)
                    {
                        person.PropertyChanged -= new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(person_PropertyChanged);
                        this.Rate -= person.Rate;
                    }

                    break;

                case GNotifyCollectionChangedAction.Replace:
                    foreach (Person person in e.NewItems)
                    {
                        person.PropertyChanged += new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(person_PropertyChanged);
                        this.Rate += person.Rate;
                    }

                    foreach (Person person in e.OldItems)
                    {
                        person.PropertyChanged -= new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(person_PropertyChanged);
                        this.Rate -= person.Rate;
                    }

                    break;

                case GNotifyCollectionChangedAction.Reset:
                    //TODO remove events
                    this.Rate = 0;
                    break;
            }
        }

        void person_PropertyChanged(object sender, 
             System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Rate")
            {
                double newRate = 0;
                foreach (Person person in this.Children)
                {
                    newRate += person.Rate;
                }

                this.Rate = newRate;
            }
        }


        private string name;
        public string Name
        {
            get { return name; }
            set
            {
                if (name != value)
                {
                    name = value;
                    OnPropertyChanged("Name");
                }
            }
        }

        private string code;
        public string Code
        {
            get { return code; }
            set
            {
                if (code != value)
                {
                    code = value;
                    OnPropertyChanged("Code");
                }
            }
        }

        private string countryRegionCode;
        public string CountryRegionCode
        {
            get { return countryRegionCode; }
            set
            {
                if (countryRegionCode != value)
                {
                    countryRegionCode = value;
                    OnPropertyChanged("CountryRegionCode");
                }
            }
        }

        private double rate;
        public double Rate
        {
            get { return rate; }
            set
            {
                if (rate != value)
                {
                    rate = value;
                    OnPropertyChanged("Rate");
                }
            }
        }
    }
}

Then, let's modify the Country class:

using Open.Windows.Controls;
using System.Collections.Specialized;

namespace GridBody
{    
    public class Country : ContainerDataItem
    {
        public Country(string code, string name)
        {
            this.name = name;
            this.code = code;


            this.Children.CollectionChanged += new 
              System.Collections.Specialized.
              GNotifyCollectionChangedEventHandler(Children_CollectionChanged);

        }

        void Children_CollectionChanged(object sender, 
             System.Collections.Specialized.GNotifyCollectionChangedEventArgs e)
        {
            switch (e.Action)
            {
                case GNotifyCollectionChangedAction.Add:
                    foreach (StateProvince stateProvince in e.NewItems)
                    {
                        stateProvince.PropertyChanged += new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(stateProvince_PropertyChanged);
                        this.Rate += stateProvince.Rate;
                    }

                    break;

                case GNotifyCollectionChangedAction.Remove:
                    foreach (StateProvince stateProvince in e.OldItems)
                    {
                        stateProvince.PropertyChanged -= new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(stateProvince_PropertyChanged);
                        this.Rate -= stateProvince.Rate;
                    }

                    break;

                case GNotifyCollectionChangedAction.Replace:
                    foreach (StateProvince stateProvince in e.NewItems)
                    {
                        stateProvince.PropertyChanged += new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(stateProvince_PropertyChanged);
                        this.Rate += stateProvince.Rate;
                    }

                    foreach (StateProvince stateProvince in e.OldItems)
                    {
                        stateProvince.PropertyChanged -= new 
                          System.ComponentModel.
                          PropertyChangedEventHandler(stateProvince_PropertyChanged);
                        this.Rate -= stateProvince.Rate;
                    }

                    break;

                case GNotifyCollectionChangedAction.Reset:
                    this.Rate = 0;
                    break;
            }
        }

        void stateProvince_PropertyChanged(object sender, 
             System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Rate")
            {
                double newRate = 0;
                foreach (StateProvince stateProvince in this.Children)
                {
                    newRate += stateProvince.Rate;
                }

                this.Rate = newRate;
            }
        }

        private string name;
        public string Name
        {
            get { return name; }
            set
            {
                if (name != value)
                {
                    name = value;
                    OnPropertyChanged("Name");
                }
            }
        }

        private string code;
        public string Code
        {
            get { return code; }
            set
            {
                if (code != value)
                {
                    code = value;
                    OnPropertyChanged("Code");
                }
            }
        }

        private double rate;
        public double Rate
        {
            get { return rate; }
            set
            {
                if (rate != value)
                {
                    rate = value;
                    OnPropertyChanged("Rate");
                }
            }
        }
    }
}

Let's modify the constructor of the Page.xaml.cs file and add a new stateProvinceCollection field:

public partial class Page : UserControl
{
    private GObservableCollection<Person> personCollection;
    private GObservableCollection<StateProvince> stateProvinceCollection;
    private GObservableCollection<Country> countryCollection;

    public Page()
    {
        InitializeComponent();

        CreateData();
        MyGridBody.ItemsSource = countryCollection;            
    }
    ...

Finally, let's add a CreateData method in the Page class:

private void CreateData()
{
    personCollection = new GObservableCollection<Person>();
    personCollection.Add(new Person("1001", "Terri", 
                         "Duffy", "7559 Worth Ct.", 
                         "Renton", "98055", 
                         "WA", "US", 63.4615, true));
    personCollection.Add(new Person("1002", "Roberto", 
                         "Tamburello", "2137 Birchwood Dr", 
                         "Redmond", "98052", 
                         "WA", "US", 43.2692, true));
    personCollection.Add(new Person("1003", "Michael", 
                         "Sullivan", "6510 Hacienda Drive", 
                         "Renton", "98055", 
                         "WA", "US", 36.0577, false));
    personCollection.Add(new Person("1004", "Sharon", 
                         "Salavaria", "7165 Brock Lane", 
                         "Renton", "98055", "WA", 
                         "US", 32.6923, true));
    personCollection.Add(new Person("1005", "Gail", 
                         "Erickson", "9435 Breck Court", 
                         "Bellevue", "98004", 
                         "WA", "US", 32.6923, true));
    personCollection.Add(new Person("1061", "David", "Hamilton", 
                         "4095 Cooper Dr.", "Kenmore", "98028", 
                         "WA", "US", 25, true));
    personCollection.Add(new Person("1062", "Jeff", "Hay", 
                         "3385 Crestview Drive", "Everett", _
                         "98201", "WA", "US", 25, true));
    personCollection.Add(new Person("1063", "Shane", "Kim", 
                         "9745 Bonita Ct.", "Bellevue", 
                         "98004", "WA", "US", 25, true));
    .
    .
    .
    .
    .
    .
    personCollection.Add(new Person("1283", "Vamsi", "Kuppa", 
                         "9833 Mt. Dias Blv.", "Bothell", 
                         "98011", "WA", "US", 9.5, true));
    personCollection.Add(new Person("1284", "Jimmy", 
                         "Bischoff", "2176 Brown Street", 
                         "Renton", "98055", "WA", 
                         "US", 9, true));
    personCollection.Add(new Person("1285", "Susan", "Eaton", 
                         "2736 Scramble Rd", "Renton", 
                         "98055", "WA", "US", 9, true));
    personCollection.Add(new Person("1286", "Kim", "Ralls", 
                         "1226 Shoe St.", "Bothell", "98011", 
                         "WA", "US", 9, true));
    personCollection.Add(new Person("1287", "Ken", "S nchez", 
                         "4350 Minute Dr.", "Newport Hills", 
                         "98006", "WA", "US", 125.5, true));
    personCollection.Add(new Person("1288", "Laura", "Norman", 
                         "6937 E. 42nd Street", "Renton", 
                         "98055", "WA", "US", 39.06, false));
    personCollection.Add(new Person("1289", "Michael", "Raheem", 
                         "1234 Seaside Way", "San Francisco", 
                         "94109", "CA", "US", 42.4808, true));
    personCollection.Add(new Person("1290", "Rob", "Walters", 
                         "5678 Lakeview Blvd.", "Minneapolis", 
                         "55402", "MN", "US", 29.8462, true));


    stateProvinceCollection = new GObservableCollection<StateProvince>();
    stateProvinceCollection.Add(new StateProvince("AB", "Alberta", "CA"));
    stateProvinceCollection.Add(new StateProvince("AK", "Alaska", "US"));
    stateProvinceCollection.Add(new StateProvince("AL", "Alabama", "US"));
    stateProvinceCollection.Add(new StateProvince("AR", "Arkansas", "US"));
    stateProvinceCollection.Add(new StateProvince("AS", "American Samoa", "AS"));
    .
    .
    .
    .
    .
    stateProvinceCollection.Add(new StateProvince("88", "Vosges", "FR"));
    stateProvinceCollection.Add(new StateProvince("89", "Yonne", "FR"));
    stateProvinceCollection.Add(new StateProvince("90", "Belford (Territoire de)", "FR"));
    stateProvinceCollection.Add(new StateProvince("91", "Essonne", "FR"));
    stateProvinceCollection.Add(new StateProvince("92", "Hauts de Seine", "FR"));
    stateProvinceCollection.Add(new StateProvince("93", "Seine Saint Denis", "FR"));
    stateProvinceCollection.Add(new StateProvince("94", "Val de Marne", "FR"));
    stateProvinceCollection.Add(new StateProvince("95", "Val d'Oise", "FR"));

    countryCollection = new GObservableCollection<Country>();
    countryCollection.Add(new Country("AF", "Afghanistan"));
    countryCollection.Add(new Country("AL", "Albania"));
    countryCollection.Add(new Country("DZ", "Algeria"));
    .
    .
    .
    .
    countryCollection.Add(new Country("VE", "Venezuela"));
    countryCollection.Add(new Country("VN", "Vietnam"));
    countryCollection.Add(new Country("VG", "Virgin Islands, British"));
    countryCollection.Add(new Country("VI", "Virgin Islands, U.S."));
    countryCollection.Add(new Country("WF", "Wallis and Futuna"));
    countryCollection.Add(new Country("YE", "Yemen"));
    countryCollection.Add(new Country("ZM", "Zambia"));
    countryCollection.Add(new Country("ZW", "Zimbabwe"));


    foreach (Country country in countryCollection)
    {
        foreach (StateProvince stateProvince in stateProvinceCollection)
        {
            if (stateProvince.CountryRegionCode == country.Code)
                country.Children.Add(stateProvince);
        }
    }

    foreach (Person person in personCollection)
    {
        foreach (StateProvince stateProvince in stateProvinceCollection)
        {
            if (stateProvince.Code == person.StateID)
            {
                stateProvince.Children.Add(person);
                break;
            }
        }
    }
}

Now, let's modify the ItemTemplate property of our GridBody in the Page.xaml file:

<o:HandyContainer.ItemTemplate>
    <g:ItemDataTemplate>
        <Grid>
            <o:HandyDataPresenter DataType="GridBody.Person">
                <g:GStackPanel Orientation="Horizontal">
                    <g:GStackPanel.KeyNavigator>
                        <o:RowSpatialNavigator/>
                    </g:GStackPanel.KeyNavigator>
                    <o:TextCell 

                        Text="{Binding FirstName, Mode=TwoWay}" 

                        x:Name="FirstName"/>
                    <o:TextCell 

                        Text="{Binding LastName, Mode=TwoWay, 
                               NotifyOnValidationError=true, 
                               ValidatesOnExceptions=true}" 

                        x:Name="LastName"/>
                    <o:TextCell 

                        Text="{Binding Address, Mode=TwoWay}" 

                        x:Name="Address"/>
                    <o:TextCell 

                        Text="{Binding City, Mode=TwoWay}" 

                        x:Name="City"/>
                    <o:TextCell 

                        Text="{Binding ZipCode, Mode=TwoWay}" 

                        x:Name="ZipCode"/>
                    <o:CheckBoxCell 

                        IsChecked="{Binding IsCustomer, Mode=TwoWay}" 

                        x:Name="IsCustomer"/>
                    <o:TextCell 

                        Text="{Binding Rate, Mode=TwoWay}" 

                        x:Name="PersonRate"/>
                </g:GStackPanel>
            </o:HandyDataPresenter>
            <o:HandyDataPresenter DataType="GridBody.StateProvince">
                <g:GStackPanel Orientation="Horizontal">
                    <g:GStackPanel.KeyNavigator>
                        <o:RowSpatialNavigator/>
                    </g:GStackPanel.KeyNavigator>
                    <o:TextCell 

                        Text="{Binding Name, Mode=TwoWay}" 

                        x:Name="StateName"/>
                    <o:TextCell 

                        Text="{Binding Children.Count}" 

                        x:Name="ChildrenCount" 

                        CanEdit="False"/>
                    <o:TextCell 

                        Text="{Binding Rate}" 

                        x:Name="RegionRate"

                        CanEdit="False"/>
                </g:GStackPanel>
            </o:HandyDataPresenter>
            <o:HandyDataPresenter DataType="GridBody.Country">
                <g:GStackPanel Orientation="Horizontal">
                    <g:GStackPanel.KeyNavigator>
                        <o:RowSpatialNavigator/>
                    </g:GStackPanel.KeyNavigator>
                    <o:TextCell 

                        Text="{Binding Name, Mode=TwoWay}" 

                        x:Name="CountryName"/>
                    <o:TextCell 

                        Text="{Binding Children.Count}" 

                        x:Name="StateChildrenCount" 

                        CanEdit="False"/>
                    <o:TextCell 

                        Text="{Binding Rate}" 

                        x:Name="CountryRate"

                        CanEdit="False"/>
                </g:GStackPanel>
            </o:HandyDataPresenter>
        </Grid>
    </g:ItemDataTemplate>
</o:HandyContainer.ItemTemplate>

3. Add title

Introduction

When hierarchical data is displayed, the user may sometimes find the display confusing. He may have trouble understanding the different levels of the hierarchy. To make hierarchical data more readable, we will allow our grid to display a title at the top of each level.

Title

ItemTitle control

Control

Let's create an ItemTitle control. This control will be displayed at the top of an item. We will use the NodeLevelActionStates state of the item to make it appear only when the item is the first one after a hierarchical level jump.

Let's add the ItemTitle class in the GoaOpen\Extensions\Grid folder:

using Netika.Windows.Controls;

namespace Open.Windows.Controls
{
    public class ItemTitle : GContentControl
    {
        public ItemTitle()
        {
            this.DefaultStyleKey = typeof(ItemTitle);
        }        
    }
}

The ItemTitle control inherits from GContentControl. This will allow us to display almost anything we would like (text, image...) inside it.

Style

Let's create the style of the ItemTitle control and add it to the generic.xaml file just before the Container_RowNodeStyle style:

<Style TargetType="o:ItemTitle">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Background" 

      Value="{StaticResource DefaultDarkGradientBottomVertical}" />
    <Setter Property="Foreground" 

      Value="{StaticResource DefaultForeground}"/>
    <Setter Property="FontSize" Value="11" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="BorderBrush" 

      Value="{StaticResource DefaultListControlStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="5,4,4,3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="o:ItemTitle">
                <Grid x:Name="LayoutRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="1*" />
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="BackgroundVisual" 

                      Fill="{TemplateBinding Background}" 

                      Grid.RowSpan="2"/>
                    <Rectangle 

                      Fill="{StaticResource DefaultReflectVertical}" 

                      Margin="1,1,1,0" />
                    <g:GContentPresenter

                      x:Name="ELEMENT_ContentPresenter"

                      Content="{TemplateBinding Content}"

                      ContentTemplate="{TemplateBinding ContentTemplate}"

                      OrientatedHorizontalAlignment="Left"

                      OrientatedMargin="{TemplateBinding Padding}"

                      OrientatedVerticalAlignment=
                        "{TemplateBinding VerticalContentAlignment}"  

                      PresenterOrientation=
                        "{TemplateBinding PresenterOrientation}"

                      Grid.RowSpan="2"/>
                    <Rectangle x:Name="BorderElement" 

                               Stroke="{TemplateBinding BorderBrush}" 

                               StrokeThickness=
                                 "{TemplateBinding BorderThickness}" 

                               Margin="-1,0,0,-1"

                               Grid.RowSpan="2"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Basically, the ItemTitle control has the same style as a standard GContentControl except that we have added a background and a border to it.

Add the ItemTitle in Container_RowNodeStyle

Let's add the ItemTitle in Container_RowNodeStyle in order that it is displayed at the top of the item.

If we draw on a picture the ControlTemplate part of the the Container_RowNodeStyle style, it will look like this:

Container_RowNodeStyle

The ItemTitle must be displayed exactly above the content of the ContainerItem. It must be located at the right of the Node Expansion button. Therefore, after the insertion of the ItemTitle, our picture will look like this:

Container_RowNodeStyle With ItemTitle

Let's modify the Container_RowNodeStyle accordingly:

<Style x:Key="Container_RowNodeStyle" TargetType="o:HandyListItem">
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Foreground" Value="{StaticResource DefaultForeground}"/>
    <Setter Property="Background" Value="{StaticResource DefaultControlBackground}" />
    <Setter Property="FontSize" Value="11" />
    <Setter Property="Indentation" Value="10" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="IsKeyActivable" Value="True"/>
    <Setter Property="ItemUnpressDropDownBehavior" Value="CloseAll" />
    <Setter Property="BorderBrush" Value="{StaticResource DefaultListControlStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Indentation" Value="30"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="o:HandyListItem">
                <Grid x:Name="LayoutRoot">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="ELEMENT_ContentPresenter" 

                                        Storyboard.TargetProperty="Opacity" To="0.6"/>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="SelectedVisual" 

                                        Storyboard.TargetProperty="Opacity" 

                                        To="0.6"/>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="SelectedReflectVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation 

                                        Duration="0" 

                                        Storyboard.TargetName="HasItem" 

                                        Storyboard.TargetProperty="Opacity" 

                                        To="0.6"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="NotFocused"/>
                            <vsm:VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="FocusVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="MouseOverStates">
                            <vsm:VisualState x:Name="NotMouseOver"/>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="MouseOverVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                        
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="PressedStates">
                            <vsm:VisualState x:Name="NotPressed"/>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="PressedVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectedStates">
                            <vsm:VisualState x:Name="NotSelected"/>
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="SelectedVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="HasItemsStates">
                            <vsm:VisualState x:Name="NotHasItems"/>
                            <vsm:VisualState x:Name="HasItems">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="HasItem" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="IsExpandedStates">
                            <vsm:VisualState x:Name="NotIsExpanded"/>
                            <vsm:VisualState x:Name="IsExpanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="CheckedArrow" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ArrowUnchecked" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="AlternateStates">
                            <vsm:VisualState x:Name="NotIsAlternate"/>
                            <vsm:VisualState x:Name="IsAlternate">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                     Storyboard.TargetName="AlternateBackgroundVisual" 

                                     Storyboard.TargetProperty="Visibility" 

                                     Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="BackgroundVisual" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="InvertedStates">
                            <vsm:VisualState x:Name="InvertedItemsFlowDirection">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ArrowCheckedToTop" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ArrowCheckedToBottom" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="NormalItemsFlowDirection"/>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidStates">
                            <vsm:VisualState x:Name="Valid"/>
                            <vsm:VisualState x:Name="NotValid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="ValidElement" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="NodeLevelActionStates">
                            <vsm:VisualState x:Name="NormalLevelNode"/>
                            <vsm:VisualState x:Name="JumpLevelNode">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 

                                        Storyboard.TargetName="NodeSpacerRectangle" 

                                        Storyboard.TargetProperty="Visibility" 

                                        Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="NodeSpacerRectangle" 

                       Height="6" Grid.Row="0" Visibility="Collapsed"/>
                    <StackPanel Orientation="Horizontal" Grid.Row="1">
                        <Rectangle Width="{TemplateBinding FullIndentation}" />
                        <Grid MinWidth="22" Margin="0,0,1,0">
                            <Grid x:Name="HasItem" 

                                  Visibility="Collapsed" 

                                  Height="16" Width="16" 

                                  Margin="0,0,0,0"

                                  VerticalAlignment="Bottom">
                                <Path x:Name="ArrowUnchecked" 

                                  HorizontalAlignment="Right" 

                                  Height="8" Width="8" 

                                  Fill="{StaticResource DefaultForeground}" 

                                  Stretch="Fill" 

                                  Data="M 4 0 L 8 4 L 4 8 Z" />
                                <Grid x:Name="CheckedArrow" Visibility="Collapsed">
                                    <Path x:Name="ArrowCheckedToTop" 

                                      HorizontalAlignment="Right" 

                                      Height="8" Width="8" 

                                      Fill="{StaticResource DefaultForeground}" 

                                      Stretch="Fill" 

                                      Data="M 8 4 L 0 4 L 4 0 z" 

                                      Visibility="Collapsed"/>
                                    <Path x:Name="ArrowCheckedToBottom" 

                                      HorizontalAlignment="Right" 

                                      Height="8" Width="8" 

                                      Fill="{StaticResource DefaultForeground}" 

                                      Stretch="Fill" 

                                      Data="M 0 4 L 8 4 L 4 8 Z" />
                                </Grid>
                                <ToggleButton 

                                  x:Name="ELEMENT_ExpandButton" 

                                  Height="16" Width="16"  

                                  Style="{StaticResource EmptyToggleButtonStyle}" 

                                  IsChecked="{TemplateBinding IsExpanded}" 

                                  IsThreeState="False" IsTabStop="False"/>
                            </Grid>
                        </Grid>
                        <g:GDockPanel Background="Transparent">
                            <o:ItemTitle g:GDockPanel.Dock="Top" 

                               Visibility="Collapsed" x:Name="ItemTitle" />
                            <Grid g:GDockPanel.Dock="Fill">
                                <Border x:Name="BackgroundVisual" 

                                    Background="{TemplateBinding Background}" />
                                <Rectangle 

                                   Fill="{StaticResource 
                                          DefaultAlternativeBackground}" 

                                   x:Name="AlternateBackgroundVisual" 

                                   Visibility="Collapsed"/>
                                <Grid x:Name="SelectedVisual" 

                                        Visibility="Collapsed" >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="1*"/>
                                        <RowDefinition Height="1*"/>
                                    </Grid.RowDefinitions>
                                    <Rectangle Fill="{StaticResource DefaultDownColor}" 

                                           Grid.RowSpan="2"/>
                                    <Rectangle 

                                           x:Name="SelectedReflectVisual" 

                                           Fill="{StaticResource DefaultReflectVertical}" 

                                           Margin="0,1,1,0" RadiusX="1" 

                                           RadiusY="1"/>
                                </Grid>
                                <Rectangle 

                                   x:Name="MouseOverVisual" 

                                   Fill="{StaticResource 
                                          DefaultDarkGradientBottomVertical}" 

                                   Visibility="Collapsed" Margin="0,0,1,0"/>
                                <Grid x:Name="PressedVisual" 

                                        Visibility="Collapsed">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="1*"/>
                                        <RowDefinition Height="1*"/>
                                    </Grid.RowDefinitions>
                                    <Rectangle