WPF DataGrid Column Header Resizing Error

Topics: Developer Forum
Dec 2, 2009 at 4:04 PM

I have a datagrid that I've styled to look/function a bit differently. There are two problems I'm running into. First, when I give it a collection to data bind to, it works as it should unless the collection is empty. If there no items in the collection, an odd error occurs where the columns move all the way to the right and the large marginal area between the edge of the control and the columns/rows expands, filling the available control area. The program then proceeds to lockup. I used the source to debug the problem and the control continuously receives a OnWidthChange (not sure if that's the exact function, it's an event being fired on column resizing) event and the source is coming externally, i.e. from a dll (not any of mine). What could cause such strange behavior on an empty collection? Here's the styling Im using

 

<Style x:Key="ColumnHeaderStyle" TargetType="{x:Type wpf:DataGridColumnHeader}">
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type wpf:DataGridColumnHeader}">
                        <Grid>
                            <wpf:DataGridHeaderBorder SeparatorVisibility="Visible" SeparatorBrush="#31715a" BorderBrush="#31715a" BorderThickness="0, 1, 1, 1">
                                <Grid x:Name="ColumnHeaderGrid">
                                    <Grid.Background>
                                        <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                                            <GradientStop Offset="0" Color="White" />
                                            <GradientStop Offset="1" Color="#b6d6cb" />
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                                        <TextBlock Padding="3, 3, 6, 3" VerticalAlignment="Center" Text="{Binding Path=Content}" />
                                        <Path Name="UpArrow" Fill="#245443" VerticalAlignment="Bottom" Margin="0,0,7,6" Visibility="Hidden">
                                            <Path.Data>
                                                <PathGeometry>
                                                    <PathFigure StartPoint="0,1">
                                                        <LineSegment Point="6,1"/>
                                                        <LineSegment Point="3,6"/>
                                                        <LineSegment Point="0,1"/>
                                                    </PathFigure>
                                                </PathGeometry>
                                            </Path.Data>
                                        </Path>
                                        <Path Name="DownArrow" Fill="#245443" VerticalAlignment="Bottom" Margin="0,0,7,6" Visibility="Hidden">
                                            <Path.Data>
                                                <PathGeometry>
                                                    <PathFigure StartPoint="0,6">
                                                        <LineSegment Point="6,6" />
                                                        <LineSegment Point="3,1" />
                                                        <LineSegment Point="0,6" />
                                                    </PathFigure>
                                                </PathGeometry>
                                            </Path.Data>
                                        </Path>
                                    </StackPanel>
                                </Grid>
                            </wpf:DataGridHeaderBorder>
                            <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Margin="0, 0, 0, 0" Style="{DynamicResource ColumnHeaderGripperStyle}"/>
                            <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{DynamicResource ColumnHeaderGripperStyle}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="SortDirection" Value="Ascending">
                                <Setter TargetName="UpArrow" Property="Visibility" Value="Collapsed"/>
                                <Setter TargetName="DownArrow" Property="Visibility" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="SortDirection" Value="Descending">
                                <Setter TargetName="DownArrow" Property="Visibility" Value="Collapsed"/>
                                <Setter TargetName="UpArrow" Property="Visibility" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="ColumnHeaderGrid">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                                            <GradientStop Offset="0" Color="#b6d6cb" />
                                            <GradientStop Offset="1" Color="White" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <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">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Padding="{TemplateBinding Padding}"
                    Background="{TemplateBinding Background}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="DataGridRowStyle" TargetType="{x:Type wpf:DataGridRow}">
            <Setter Property="ContextMenu" Value="{DynamicResource ItemsMenu}" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                                <GradientStop Offset="0" Color="White" />
                                <GradientStop Offset="1" Color="#B6D6CB" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Item.IsNewToMe}" Value="True">
                    <Setter Property="FontWeight" Value="Black" /> 
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="DataGridCellStyle" TargetType="{x:Type wpf:DataGridCell}">
            <Setter Property="Margin" Value="0" />
            <Setter Property="BorderThickness" Value="0" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#b6d6cb" />
                    <Setter Property="Foreground" Value="#245443" />
                </Trigger>
            </Style.Triggers>
        </Style>

The second problem is the small margin on the left of the control that appears. I cannot figure out what that margin is from as none of the datagrid examples I've seen have that margin present. Any clues?

<Style x:Key="ColumnHeaderStyle" TargetType="{x:Type wpf:DataGridColumnHeader}">
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type wpf:DataGridColumnHeader}">
                        <Grid>
                            <wpf:DataGridHeaderBorder SeparatorVisibility="Visible" SeparatorBrush="#31715a" BorderBrush="#31715a" BorderThickness="0, 1, 1, 1">
                                <Grid x:Name="ColumnHeaderGrid">
                                    <Grid.Background>
                                        <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                                            <GradientStop Offset="0" Color="White" />
                                            <GradientStop Offset="1" Color="#b6d6cb" />
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                                        <TextBlock Padding="3, 3, 6, 3" VerticalAlignment="Center" Text="{Binding Path=Content}" />
                                        <Path Name="UpArrow" Fill="#245443" VerticalAlignment="Bottom" Margin="0,0,7,6" Visibility="Hidden">
                                            <Path.Data>
                                                <PathGeometry>
                                                    <PathFigure StartPoint="0,1">
                                                        <LineSegment Point="6,1"/>
                                                        <LineSegment Point="3,6"/>
                                                        <LineSegment Point="0,1"/>
                                                    </PathFigure>
                                                </PathGeometry>
                                            </Path.Data>
                                        </Path>
                                        <Path Name="DownArrow" Fill="#245443" VerticalAlignment="Bottom" Margin="0,0,7,6" Visibility="Hidden">
                                            <Path.Data>
                                                <PathGeometry>
                                                    <PathFigure StartPoint="0,6">
                                                        <LineSegment Point="6,6" />
                                                        <LineSegment Point="3,1" />
                                                        <LineSegment Point="0,6" />
                                                    </PathFigure>
                                                </PathGeometry>
                                            </Path.Data>
                                        </Path>
                                    </StackPanel>
                                </Grid>
                            </wpf:DataGridHeaderBorder>
                            <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Margin="0, 0, 0, 0" Style="{DynamicResource ColumnHeaderGripperStyle}"/>
                            <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{DynamicResource ColumnHeaderGripperStyle}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="SortDirection" Value="Ascending">
                                <Setter TargetName="UpArrow" Property="Visibility" Value="Collapsed"/>
                                <Setter TargetName="DownArrow" Property="Visibility" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="SortDirection" Value="Descending">
                                <Setter TargetName="DownArrow" Property="Visibility" Value="Collapsed"/>
                                <Setter TargetName="UpArrow" Property="Visibility" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="ColumnHeaderGrid">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                                            <GradientStop Offset="0" Color="#b6d6cb" />
                                            <GradientStop Offset="1" Color="White" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <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">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Padding="{TemplateBinding Padding}"
                    Background="{TemplateBinding Background}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="DataGridRowStyle" TargetType="{x:Type wpf:DataGridRow}">
            <Setter Property="ContextMenu" Value="{DynamicResource ItemsMenu}" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                                <GradientStop Offset="0" Color="White" />
                                <GradientStop Offset="1" Color="#B6D6CB" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Item.IsNewToMe}" Value="True">
                    <Setter Property="FontWeight" Value="Black" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="DataGridCellStyle" TargetType="{x:Type wpf:DataGridCell}">
            <Setter Property="Margin" Value="0" />
            <Setter Property="BorderThickness" Value="0" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#b6d6cb" />
                    <Setter Property="Foreground" Value="#245443" />
                </Trigger>
            </Style.Triggers>
        </Style>