Misaligned Column Headers

Oct 30, 2008 at 5:23 AM
Edited Oct 30, 2008 at 5:25 AM
I am using the following markup for a DataGrid:

        <ms:DataGrid Name="grdCallNo" ItemsSource="{Binding}" AlternatingRowBackground="{StaticResource resSystemControlBrush}"
                     AutoGenerateColumns="False" IsSynchronizedWithCurrentItem="True" IsTextSearchEnabled="True"
                     CanUserAddRows="False" CanUserDeleteRows="False" SelectionUnit="FullRow"
                     ColumnWidth="SizeToHeader" SelectionMode="Single" Width="416">
                <ms:DataGridTextColumn DataFieldBinding="{Binding Path=title}" Header="Title" />
                <ms:DataGridTextColumn DataFieldBinding="{Binding Path=authorName}" Header="Author Name" />
                <ms:DataGridTextColumn DataFieldBinding="{Binding Path=classNo}" Header="Class No." />
                <ms:DataGridTextColumn DataFieldBinding="{Binding Path=bookNo}" Header="Book No." />

I get the following result for this code:
Sample Image

As clearly seen from the image, the columns are misaligned with the Column Headers. What should I do solve the problem???

Oct 30, 2008 at 1:57 PM
This should be fixed in the v1 DataGrid.  Please try that out and let us know if you find the same issue.
Oct 30, 2008 at 2:49 PM
Edited Oct 30, 2008 at 4:33 PM
OK, I have downloaded the v1 and now my grid XAML looks like following:

        <ms:DataGrid Name="grdCallNo" ItemsSource="{Binding}" AlternatingRowBackground="{StaticResource resSystemControlBrush}"
                     AutoGenerateColumns="False" IsReadOnly="True" IsSynchronizedWithCurrentItem="True" IsTextSearchEnabled="True"
                     CanUserAddRows="False" CanUserDeleteRows="False" SelectionUnit="FullRow"
                     ColumnWidth="SizeToHeader"  HeadersVisibility="All" SelectionMode="Single" Width="416">
          These resources add a button to the column header that will select
          all of the cells in that column.
                <Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
                    <Setter Property="Width" Value="8"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Cursor" Value="SizeWE"/>
                    <Setter Property="Template">
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border Padding="{TemplateBinding Padding}"
                    Background="{TemplateBinding Background}"/>

                <Style x:Key="SelectColumnButtonStyle" TargetType="{x:Type Button}">
                    <Setter Property="VerticalAlignment" Value="Bottom" />
                    <Setter Property="Height" Value="10" />
                    <Setter Property="ClickMode" Value="Press" />
                    <Setter Property="Cursor" Value="ScrollS" />
                    <Setter Property="Template">
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Background="Transparent" />

                <Style x:Key="{x:Type dg:DataGridColumnHeader}" TargetType="{x:Type dg:DataGridColumnHeader}">
                    <Setter Property="Template">
                            <ControlTemplate TargetType="{x:Type dg:DataGridColumnHeader}">
                                    <ms:DataGridHeaderBorder SortDirection="{TemplateBinding SortDirection}"
                                     IsHovered="{TemplateBinding IsMouseOver}"
                                     IsPressed="{TemplateBinding IsPressed}"
                                     IsClickable="{TemplateBinding CanUserSort}"
                                     Background="{TemplateBinding Background}"
                                     BorderBrush="{TemplateBinding BorderBrush}"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     Padding ="{TemplateBinding Padding}">
                                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />

                                    <Thumb x:Name="PART_LeftHeaderGripper"
                   Style="{StaticResource ColumnHeaderGripperStyle}"/>
                                    <Thumb x:Name="PART_RightHeaderGripper"
                   Style="{StaticResource ColumnHeaderGripperStyle}"/>
                                    <Button x:Name="SelectColumnButton"
                          Style="{StaticResource SelectColumnButtonStyle}"

                <ms:DataGridTextColumn Binding="{Binding Path=title}" Header="Title" />
                <ms:DataGridTextColumn Binding="{Binding Path=authorName}" Header="Author Name" />
                <ms:DataGridTextColumn Binding="{Binding Path=classNo}" Header="Class No." />
                <ms:DataGridTextColumn Binding="{Binding Path=bookNo}" Header="Book No." />

But the problem persists. The columns are out of sync with column headers. Also, I copied the resources section from guidelines specifying how to select full columns. But I still cannot do this as no button is visible on top of a column.
Nov 1, 2008 at 9:25 AM
Can anybody help me with the issue I am facing???
Nov 3, 2008 at 7:03 PM

I’m not sure, but try to remove ColumnWidth="SizeToHeader" from definition of Data grid and place it in every column definition, example:


                                    Binding="{Binding Path=title}"


                                    Width="SizeToHeader" />

                                   Binding="{Binding Path=authorName}"

                                   Header="Author Name"

                                  Width="SizeToHeader" />

                                  Binding="{Binding Path=classNo}"

                                  Header="Class No."


                                 Binding="{Binding Path=bookNo}"

                                 Header="Book No."

                                 Width="SizeToHeader" />
                                                                                         Thanks. Lena

Nov 4, 2008 at 5:26 AM
I have tried and one that with no luck. ColumnWidth attribute makes no difference. Without this attribute, the misalignment in Headers & Columns is even more significant.

I have uploaded a Sample project demostrating the problem at:

The database from where the data is fetched has also been provided in the App_Data folder in the main executable project directory. Just attach it and modify the connection string as it suits you, if you decide to try it out.
Nov 4, 2008 at 1:50 PM
 So the issue is with your default style on Button in your SharedResource.xaml file.  It has an effect on the top-left corner button and is pushing the columns out of sync.
Nov 5, 2008 at 2:49 PM
Fine, I have removed that Style with the TargetType as Button from SharedResource.xaml file. Now the columns are properly aligned.

But the code I have pasted from

for allowing the whole column to be selected is NOT working. Nothing happens when I click a Column Header!!!

Nov 6, 2008 at 2:41 PM
If you take a look at SelectColumns, it does not work for SelectionUnit = FullRow.  Also, you have SelectionMode set to Single which also will not let it select multiple cells in the column.
Nov 6, 2008 at 3:42 PM
Thanx, that cleaned up the whole issue.
Thanx very much for your repeated support...