Skip to content

WPF Toolkit DataGrid, Part II – Custom styling

by Samuel Moura on April 27th, 2009

This post is part of the WPF Toolkit DataGrid series. Here is a list with the complete set of blog posts:

Introduction

In Part I we went through basic DataGrid setup creating a sample application that showcased the usage of DataGridColumns. In this part we will dive into more advanced concepts. It is my ambition that you get a good understanding of how to setup a DataGrid to do whatever you wish without restrictions. In this part we will focus on restyling the DataGrid, DataGridColumnHeaders and DataGridRowHeaders.

Roadmap

  1. Visual breakdown of styles and layout
  2. Styling the DataGrid
  3. Styling DataGridColumnHeaders
  4. Styling DataGridRowHeaders
  5. Creating a new template for the SelectAllButton

Download sample source code

Here is a list with the samples presented on this blog post:

  1. WPF Toolkit DataGrid Sample 03 – Styling the DataGrid
  2. WPF Toolkit DataGrid Sample 04 – Styling DataGridColumnHeaders
  3. WPF Toolkit DataGrid Sample 05 – Styling DataGridRowHeaders
  4. WPF Toolkit DataGrid Sample 06 – Styling the SelectAllRows button

Visual breakdown of layout and styles

Before we start digging dipper into DataGrid’s functionalities and restyling let’s take a look on what WPF Toolkit uses to build it. It is essential that you understand what each class is responsible for in order to find which styles you need to replace so that you can change the looks of a specific region of the DataGrid.

First let’s look at the DataGrid from a layout perspective. Along with the DataGrid this are the main components used to display the information inside of it:

WpfToolkitDataGrid-ss003

These classes are the ones used by the DataGrid to render itself. They are the objects that end up on the application’s visual tree:

  • DataGridColumnHeadersPresenter: this control will go through the DataGridColumns collection of the DataGrid and create a DataGridColumnHeader for each;
  • DataGridColumnHeader: picks up the information in its DataGridColumn and renders it as a header on the corresponding column position;
  • DataGridRowsPresenter: the ItemsControl that iterates the ItemsSource creating a DataGridRow for each item;
  • DataGridRow: represents an item of ItemsSource;
  • DataGridRowHeader: this is a Button that lays on the beginning of each DataGridRow. It allows the user to select the row, resize it, and can be used to show information – for instance, on the current operation being performed over the selected row or still to provide error information;
  • DataGridCellsPresenter: this is the ItemsControl used to render each cell, based on the column bindings, for the DataGridRow bounded item;
  • DataGridCell: this is the control used to render a specific value of an Item. Essentially it is made of two templates, one to display the item and one for editing it;
  • DataGridDetailsPresenter: this is an extension of the DataGridRow used to show further information about a row than the one displayed by the cells. It is a panel that is normally laid bellow the cells. On WPF Toolkit’s DataGrid, by default, this panel is only shown when the user selects a row.

On the following image you can see where each of this controls are laid. Take some time to get to know what component is responsible for what part of the DataGrid.

    WpfToolkitDataGrid-ss005a

    Starting from the top, in the DataGrid, we will have a DataGridColumnHeadersPresenter used to present all DataGridColumnHeaders, there will be one header per bounded column. Each column header has two grippers. Inside the DataGrid along with the DataGridColumnHeadersPresenter there will be a DataGridRowsPresenter which will contain all our rows. The DataGridRow will contain a DataGridRowHeader and a DataGridCellsPresenter which contains all the DataGridCells. Also part of the DataGridRow, although not shown in the screenshot, is the DataGridDetailsPresenter, which can be used to present further details on the selected row.

    If you use Snoop to browse the visual tree of our sample from Part I you will see the following (I have marked in red the items you should pay more attention to):

    WpfToolkitDataGrid-ss005b

Side note: Snoop is a great tool for analyzing how a WPF application is structured. If you do not have this tool on you arsenal, stop reading, go to their web site, download it and install it. This is a must have if you are developing WPF applications.

You can see each of the classes we looked at above in the visual tree of our WPF sample application. Take some time to assimilate the structure used before proceeding.

By now you should have a solid understanding about the structure of the DataGrid. You should be able to easily spot each component along with which class is responsible for rendering it. This is the foundation for our next job – restyling the WPF Toolkit’s DataGrid.

Styling the DataGrid

Since the DataGrid is divided in several parts and each has individual styles, our ControlTemplate for it will not change that much, most of it will be based on the one that comes with WPF Toolkit.

The DataGrid style has five major components:

  • Select all button: this is the button on the top left corner of the DataGrid that is used to select all rows;
  • PART_ColumnHeadersPresenter: this is the ItemsControl used to present all of our DataGridColumnHeaders;
  • PART_ScrollContentPresenter: the main area of the DataGrid where all the DataGridRows will be rendered;
  • PART_VerticalScrollBar: renders the vertical scroll bar of our ScrollViewer;
  • PART_HorizontalScrollBar: renders the horizontal scroll bar of our ScrollViewer.

I have taken a screenshot from Snoop in order to show you how these parts fit together on visual tree:

WpfToolkitDataGrid-ss007
In the last sample we worked with on Part I, you may have notice that the vertical scroll bar does not occupy the full height of the DataGrid. In our new style, we will make it fill that empty space. This is just a minor tweak in the default DataGrid ControlTemplate.

Since you may want to reuse this new style just add a new resource dictionary to your solution where you can place the new DataGrid style – in the sample code I have named it ‘DataGrid.Generic.xaml’ and placed it under the Themes folder.

The change we are planning to make is a small one, so we can reuse the style defined within WPF Toolkit, you just have to copy the DataGrid style from the ‘Generic.xaml’ file on WPF Toolkit and add it to your new dictionary. Find the definition of the vertical scroll bar in the ControlTemplate part of the style. Change Grid.Row to 0 and give it a Grid.RowSpan of 2, as shown below:

(…)
<ScrollBar Name="PART_VerticalScrollBar"
           Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Orientation="Vertical"
           Maximum="{TemplateBinding ScrollableHeight}"
           ViewportSize="{TemplateBinding ViewportHeight}"
           Value="{Binding Path=VerticalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
(…)

Along with extending the scroll bar you can also style your DataGrid by setting some nice colors. To give your DataGrid a cooler look you can start by creating a series of brushes:

<!-- Generic brushes -->
<SolidColorBrush x:Key="DefaultControlBorderBrush" Color="#FF688CAF"/>
<SolidColorBrush x:Key="DefaultControlBackgroundBrush" Color="#FFE3F1FE"/>
<SolidColorBrush x:Key="DefaultControlForegroundBrush" Color="#FF10257F"/>

<!-- DataGrid related brushes -->
<SolidColorBrush x:Key="GridLineColorBrush" Color="#FFCEDFF6" />
<LinearGradientBrush x:Key="AlternateRowBackgroundBrush"
                     StartPoint="0.5,0.0" EndPoint="0.5,1.0">
    <GradientStop Color="#FFFEFEFF" Offset="0"/>
    <GradientStop Color="#FFE4F0FC" Offset="1"/>
</LinearGradientBrush>

These brushes will then be used to set the following properties on the style:

(…)
<Setter Property="Background"
        Value="{StaticResource DefaultControlBackgroundBrush}"/>
<Setter Property="Foreground"
        Value="{StaticResource DefaultControlForegroundBrush}"/>
<Setter Property="BorderBrush"
        Value="{StaticResource DefaultControlBorderBrush}" />
<Setter Property="HorizontalGridLinesBrush"
        Value="{StaticResource GridLineColorBrush}" />
<Setter Property="VerticalGridLinesBrush"
        Value="{StaticResource GridLineColorBrush}" />
<Setter Property="AlternatingRowBackground"
        Value="{StaticResource AlternateRowBackgroundBrush}" />
<Setter Property="BorderThickness" Value="1" />
(…)

In the sample you will find all the style for the DataGrid. When you go through its ControlTemplate you will see most of the items described in ‘Visual breakdown of layout and styles’. This is how our DataGrid currently looks with the new style:

WpfToolkitDataGrid-ss006

You can download a working sample by following this link.

Styling DataGridColumnHeaders

The next step will be to create custom styles for our DataGridColumnHeaders. In the class diagram above you can see that DataGridColumnHeaders extend ButtonBase, so when we style a DataGridColumnHeader we are actually creating a style for a button. We also need to keep in mind the two styles for the grippers – one for each side of the DataGridColumnHeader. The grippers will be used to resize the DataGridColumnHeader, thus they need to exist as controls the user can interact with!

Let’s start by creating the style for the grippers, both left and right, since they will be referenced as static resources by the DataGridColumnHeader style.

<!-- DataGridColumnHeader Right Gripper Style -->
<Style x:Key="ColumnHeaderRightGripperStyle" TargetType="{x:Type Thumb}">
    <Setter Property="Width" Value="8"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Cursor" Value="SizeWE"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}">
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!-- DataGridColumnHeader Left Gripper Style -->
<Style x:Key="ColumnHeaderLeftGripperStyle"
       BasedOn="{StaticResource ColumnHeaderRightGripperStyle}"
       TargetType="{x:Type Thumb}">
    <Setter Property="Width" Value="8"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Cursor" Value="SizeWE"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Name="Border"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}">
                    <Canvas>
                        <Line RenderOptions.EdgeMode="Aliased" Stroke="#88B0E4"
                              X1="7" Y1="{Binding ElementName=Border, Path=ActualHeight}"
                              X2="7" Y2="0"/>
                    </Canvas>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

As you may have noticed we are drawing a line on the left gripper but not drawing it on the right gripper. If we were to draw lines on both sides the end result would be a thicker line. Instead, on the right gripper, we just reserve some space so that the user will have somewhere to click and drag to resize the column.

Now that you have created the grippers you can go ahead and create the style for the DataGridColumnHeader. In this style we will be adding a nice blue gradient background and a highlight gradient that gets displayed when the user put his mouse over a column header:

<!-- DataGridColumnHeader Style -->
<Style x:Key="ColumnHeaderStyle" TargetType="{x:Type WpfToolkit:DataGridColumnHeader}">
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}"/>
    <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
    <Setter Property="BorderThickness" Value="0,1,0,1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type WpfToolkit:DataGridColumnHeader}">
                <Grid>
                    <WpfToolkit:DataGridHeaderBorder
                        x:Name="headerBorder"
                        SortDirection="{TemplateBinding SortDirection}"
                        IsHovered="{TemplateBinding IsMouseOver}"
                        IsPressed="{TemplateBinding IsPressed}"
                        IsClickable="{TemplateBinding CanUserSort}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding ="{TemplateBinding Padding}"
                        SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
                        SeparatorBrush="{TemplateBinding SeparatorBrush}">
                        <Border BorderBrush="{StaticResource HeaderInnerBorderBrush}"
                                BorderThickness="0,1,0,0">
                            <TextBlock
                                Text="{Binding}" Margin="4,0,4,0"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                        </Border>
                    </WpfToolkit:DataGridHeaderBorder>

                    <Thumb x:Name="PART_LeftHeaderGripper"
                           HorizontalAlignment="Left"
                           Style="{StaticResource ColumnHeaderRightGripperStyle}"/>
                    <Thumb x:Name="PART_RightHeaderGripper"
                           HorizontalAlignment="Right"
                           Style="{StaticResource ColumnHeaderLeftGripperStyle}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="headerBorder" Property="Background"
                                Value="{StaticResource HeaderHighlightedBackgoundBrush}" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="headerBorder" Property="Background"
                                Value="{StaticResource HeaderPressedBackgroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Go ahead now and create a ‘Brushes.xaml’ beside the ‘DataGrid.Generic.xaml’ resource dictionary. In here you will define all of the brushes used by the styles in the DataGrid. This will make it easier for you to reuse them on the remaining controls of your application.

<!-- Header related brushes -->
<SolidColorBrush x:Key="HeaderBorderBrush" Color="#88B0E4"/>
<SolidColorBrush x:Key="HeaderInnerBorderBrush" Color="#FFFFFF" />
<LinearGradientBrush x:Key="HeaderBackgroundBrush"
                     StartPoint="0.5,0.0" EndPoint="0.5,1.0">
    <GradientStop Color="#FF98BFEB" Offset="0"/>
    <GradientStop Color="#FFB8D4F2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HeaderHighlightedBackgoundBrush"
                     StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="#FFA3CBF7" Offset="0"/>
    <GradientStop Color="#FFD9E6F9" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HeaderPressedBackgroundBrush"
                     StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="#FFA3CBF7" Offset="1"/>
    <GradientStop Color="#FFD9E6F9" Offset="0"/>
</LinearGradientBrush>

In order for you to see the outcome of these new styles you will have to alter the DataGrid style by adding it a setter for the ColumnHeaderStyle property:

<Setter Property="ColumnHeaderStyle" Value="{StaticResource ColumnHeaderStyle}"/>

In the following picture you can see how our DataGrid is actually looking after restyling the DataGridColumnHeaders:

WpfToolkitDataGrid-ss008Here are our fancy looking DataGridColumnHeaders. Notice that the ‘Player Name’ column was purposely highlighted when the screenshot was taken.

You can download a working sample of the code presented here by following this link.

Styling DataGridRowHeaders

DataGridRowHeaders pretty much follow the DataGridColumnHeaders in the way they are implemented. So you have two grippers, one on top and another on bottom, and a style for header itself. In this case we will use the same style for both the grippers just to lay the required space for the user to interact with. The visual separator for the columns will be the control template’s border.

<!-- DataGridRowHeader Gripper -->
<Style x:Key="RowHeaderGripperStyle" TargetType="{x:Type Thumb}">
    <Setter Property="Height" Value="8"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Cursor" Value="SizeNS"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now you can go ahead and include the style for the DataGridRowHeader. For this you will use most of the code from the DataGridColumnHeader and the corresponding brushes. We want to keep the look and feel of both header types consistent.

<!-- DataGridRowHeader Style -->
<Style x:Key="{x:Type WpfToolkit:DataGridRowHeader}"
       TargetType="{x:Type WpfToolkit:DataGridRowHeader}">
    <Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type WpfToolkit:DataGridRowHeader}">
                <Grid>
                    <WpfToolkit:DataGridHeaderBorder
                        x:Name="headerBorder"
                        IsSelected="{TemplateBinding IsRowSelected}"
                        IsHovered ="{TemplateBinding IsMouseOver}"
                        IsPressed="{TemplateBinding IsPressed}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1,0,1,1"
                        Padding ="{TemplateBinding Padding}"
                        Orientation="Horizontal"
                        SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
                        SeparatorBrush="{TemplateBinding SeparatorBrush}">
                        <Border BorderBrush="{StaticResource HeaderInnerBorderBrush}"
                                BorderThickness="0,1,0,0">
                            <StackPanel Orientation="Horizontal">
                                <ContentPresenter
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    VerticalAlignment="Center"/>
                                <Control
                                    SnapsToDevicePixels="false"
                                    Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type WpfToolkit:DataGridRow}}, Path=(Validation.HasError), Converter={StaticResource bool2VisibilityConverter}}"
                                    Template="{Binding RelativeSource={RelativeSource AncestorType={x:Type WpfToolkit:DataGridRow}}, Path=ValidationErrorTemplate}" />
                            </StackPanel>
                        </Border>
                    </WpfToolkit:DataGridHeaderBorder>

                    <Thumb x:Name="PART_TopHeaderGripper"
                           VerticalAlignment="Top"
                           Style="{StaticResource RowHeaderGripperStyle}"/>
                    <Thumb x:Name="PART_BottomHeaderGripper"
                           VerticalAlignment="Bottom"
                           Style="{StaticResource RowHeaderGripperStyle}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="headerBorder" Property="Background"
                                Value="{StaticResource HeaderHighlightedBackgoundBrush}" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="headerBorder" Property="Background"
                                Value="{StaticResource HeaderPressedBackgroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

As you can see this style is pretty much the same as the one for the DataGridColumnHeader. After these changes this is how our application is looking:

WpfToolkitDataGrid-ss009

It is looking pretty cool! To download the sample for this part of the tutorial just follow this link.

Creating a new template for the SelectAllButton

The only thing that is currently killing the look of our DataGrid is that top left corner button. This button is used to select all the rows on the DataGrid and its appearance can be altered by setting it on the DataGrid’s style. First you have to create the style for the button:

<!-- SelectAllButton ControlTemplate -->
<ControlTemplate x:Key="SelectAllButtonTemplate" TargetType="{x:Type Button}">
    <Grid>
        <Rectangle x:Name="Border" SnapsToDevicePixels="True"
                   Stroke="{StaticResource HeaderBorderBrush}"
                   Fill="{StaticResource HeaderBackgroundBrush}" />
        <Border SnapsToDevicePixels="True" Margin="1,1,1,0"
                BorderBrush="White" BorderThickness="0,1,0,0" />
        <Polygon x:Name="Arrow"
                 HorizontalAlignment="Right"
                 VerticalAlignment="Bottom"
                 Margin="8,8,3,3"
                 Opacity="0.15"
                 Fill="Black"
                 Stretch="Uniform"
                 Points="0,10 10,10 10,0" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Border" Property="Fill"
                    Value="{StaticResource HeaderHighlightedBackgoundBrush}" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="Border" Property="Fill"
                    Value="{StaticResource HeaderPressedBackgroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Arrow" Property="Visibility" Value="Collapsed" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

The only thing remaining now is to set this template on the corresponding button on the DataGrid style:

<!--Left Column Header Corner -->
(...)
<Button
    Command="{x:Static WpfToolkit:DataGrid.SelectAllCommand}"
    Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type WpfToolkit:DataGrid}}, Path=CellsPanelHorizontalOffset}"
    Focusable="false"
    Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type WpfToolkit:DataGrid}}, Path=HeadersVisibility, Converter={x:Static WpfToolkit:DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static WpfToolkit:DataGridHeadersVisibility.All}}"
    Template="{StaticResource SelectAllButtonTemplate}"/>
(...)

Congrats! You have now restyled all of the relevant components of the DataGrid. This is the final screenshot of the sample developed on this blog post:

WpfToolkitDataGrid-ss010
The final sample for this blog post can be downloaded by following this link.

End of Part II

In this part you have seen how to style the look of the DataGrid. You got to know a bit more about the structure used by WPF Toolkit to render its DataGrid and its data.

Don’t miss the next part of this series. We will look into more advanced stuff like styling cells, columns and creating custom DataGridColumns.

From → WPF

68 Comments
  1. thenndral permalink

    Hi Samuel ,

    I’m using VS2010 wpf[C#]
    I’m new to wpf, when i search for styling datagrid i got your blog link.Thanks for your amazing tutorial. This Tutorial Teach me previous version of WPFToolKit [datagrid]. How can i use for new DataGrid with affix from VS2010. Could you please help me how to code for it? Sorry for disturbing

    thanks in advance.
    thenndral.

  2. eduardo permalink

    Hi,

    I was looking for a way to do an external button to call the Grid.SelectAll() method. The problem is I’m using MVVM and the select All is not a Event to call using GalaSoft.MvvmLight.

    How can I do that?

  3. but i was unable to understand the basic of styling data grid view , just like we can customize in asp.net with datalist or repeater

  4. srinivas permalink

    Hi Samuel,

    I didn’t find any x:Key in my code… i could find x:Name,x:Uid, x:Modifier field. Can you help me here?

    Srinivas

  5. I am working on a similar article on my own blog, do you know where to find some more detailed references? Regards L.Hessellund

  6. Praveen permalink

    I am trying to align the contents of the cell. All the cell contents vertically aligned to center and all number type cell horizontally aligned to right. Please let me know if you have any solution for this in WPF.

    Regards,
    Praveen

  7. Eric Ouellet permalink

    Hello Samuel,

    I’ve been looking for more than a week to find a way to change the background of a DataGridRow based on one value of the rowItem (property or the instance associated to the row) by a binding to it.

    I’ve try to modify the style and datatemplate without success.

    Can you help me on that ? I think it is not really easy !!!
    Thanks a lot,
    Eric

  8. Kevin permalink

    hi Samuel,

    Greate tutorial! I wonder how to style the sort direction indicator?

    thx

    Kevin

  9. @miliu
    Sure you can use it as a base dictionary for your styles. WPF Toolkit was the base for the DataGrid that ships with .Net 4.

  10. miliu permalink

    Hi Samuel, thanks for the great article. I’m new to WPF DataGrid and I really need some features in your article. But my first question is that are all those technique you describe for WPF Toolkit still valid for released DataGrid in VS2010? If so, where do I find the generic.xaml as a base for update?

  11. Rui permalink

    Fantastic article! I’m a fan of WPF by the way. This article’s been collected by me alreday : )

    Beautiful work

  12. Michael permalink

    Not sure whether the only way but changing to

    xmlns:Themes=”clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic”
    xmlns:Primitives=”clr-namespace:System.Windows.Controls.Primitives;assembly=PresentationFramework”>

    produced the same results. Themes for <Themes:DataGridHeaderBorder as without WPFToolkit <DataGridHeaderBorder in XAML becomes invalid.

  13. Michael permalink

    In Visual Studio 2010 with target .Net 4 may I drop all references to WPFToolkit in DataGrid.Generic.xaml

    It is not obvious how to replace

    …xmlns:WpfToolkit=”http://schemas.microsoft.com/wpf/2008/toolkit”
    xmlns:Primitives=”clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit”>

  14. @Michael
    On the DataGridColumnHeader you can create a couple of Triggers that bind to the SortDirection. You can then display an arrow accordingly.

  15. @Renju Yes. That one is just a minor tweak on the DataGrid definition.

    Thank you very much for the motivating feedback! ;)

  16. Ken permalink

    @Samuel Moura
    Thanks for the reply, sorry I didn’t see it til just now!

  17. Renju permalink

    @Renju
    Hi Sam,

    I Found it myself, I dnt know whether its the correct method or not.Anyways, I changed the property of grid headersvisibility = column (before it was ALL)and hurray its gone :)

    Also , is there any way to add an image to the background of the grid or to the column header or bothways?

    Thanks buddy..

    PS: Expecting more WPF info from you…

  18. Renju permalink

    Hi Samuel,

    First of all MindBlowing Article..No words to describe..

    Am a newbie to WPF and its really a very good starter kit.

    I need some help from you.I dnt want the Select All Button and that column beneath it.I removed the button from the datagrid.generic.xaml, but the columns are still there.(Meanwhile, am using this grid to make a digital signage, so no need to select all and am refreshing the grid every 1 second).So can you please tell me how to remove the select all and that column completely.

Trackbacks & Pingbacks

  1. How to support re-sizing of DataGridRowHeader column in DataGrid | Yankovitch Answers
  2. Fix Wpf Datagrid Validation Error Style Windows XP, Vista, 7, 8 [Solved]
  3. My Pocket reads (readitlater) « Opposable Bits
  4. Internship day 9# at Thomson Reuters (Thailand) / XML + DataGrid + DataTable + DataSet + Binding XML + C# | KanTae Blog
  5. In Pursuit of Higher Learning « Me and My Fabulous Little Adventures
  6. mattbrickner.com » Blog Archive » links for 2010-03-11
  7. mattbrickner.com » Blog Archive » links for 2010-03-04
  8. Curso Web 2.0 » Blog Archive » La Bloguera 7 January 2010
  9. Escuchoyo : [WPF/WCF] DataGrid + DoubleClick + MVVM + Loading Splash (description & code)
  10. DotNetShoutout

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS