DataGrid: Odd visual "leftovers" when EnableColumnVirtualization is True

Oct 14, 2009 at 8:17 PM

I set my datagrid to EnableColumnVirtualization because I have a lot of columns (around 20-30). Part of the visual template for the column header checks the value of an attached property, and shows a filter icon on the column header if it is. If column virtualization is on, and 1 of those headers gets the value set, scrolling horizontally causes other columns to randomly pick up that value and display it, even though Set<X> was never called on those columns. If I turn column virtualization off, all is well. This is the stlye I'm using for the column headers:

<Style TargetType="{x:Type toolkit:DataGridColumnHeader}">
        <Setter Property="MinHeight" Value="28" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Background" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type toolkit:DataGridColumnHeader}">
                    <Border Background="#fcfcfc">
                        <Grid x:Name="OuterGrid" Background="#fcfcfc" Margin="0,0,0,4">
                            <Border x:Name="OuterBorder" BorderThickness="1,0,1,1" BorderBrush="{StaticResource RightBorderBrush}" />
                            <Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="1" Margin="1" />
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="2" />
                                </Grid.ColumnDefinitions>
                                <Grid Margin="4,0,5,4" Grid.Column="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="6" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Image x:Name="SortArrow" Visibility="Collapsed" Source="../Resources/SortImage.png" Stretch="None" Margin="0,1,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" />
                                    <ContentPresenter Grid.Row="1" TextBlock.Foreground="#4c607a" Grid.Column="0" Margin="5,0,0,0" />
                                </Grid>
                                <Border x:Name="SelectorBorder" Width="20" Visibility="Collapsed" MouseLeftButtonDown="SelectorBorder_MouseLeftButtonUp" Grid.Column="1" BorderThickness="1,0,0,0" Background="Transparent" BorderBrush="Transparent">
                                    <Border x:Name="InnerSelectorBorder" BorderThickness="0" Margin="1,1,2,2" Background="Transparent" BorderBrush="Transparent">
                                        <Image x:Name="SelectorIndicator" Source="../Resources/DropDownArrow.png" Visibility="Hidden" Margin="0,1,1,0" SnapsToDevicePixels="False" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Border>
                                </Border>
                                <Thumb Grid.Column="2" x:Name="PART_RightHeaderGripper"
                                       HorizontalAlignment="Right"
                                       Style="{StaticResource ColumnHeaderGripperStyle}"/>
                            </Grid>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="SortDirection" Value="Ascending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                            <Setter TargetName="SortArrow" Property="Source" Value="../Resources/SortImage.png" />
                            <Setter TargetName="OuterGrid" Property="Background" Value="#f2f7fd" />
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="#dfe9f6" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="White" />
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Descending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                            <Setter TargetName="SortArrow" Property="Source" Value="../Resources/SortImageDescending.png" />
                            <Setter TargetName="OuterGrid" Property="Background" Value="#f2f7fd" />
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="#dfe9f6" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="White" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="OuterGrid" Property="Background" Value="#f2f7fd" />
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="#dfe9f6" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="White" />
                            <Setter TargetName="SelectorBorder" Property="BorderBrush" Value="{StaticResource ColumnBorderBrushInactive}" />
                            <Setter TargetName="SelectorIndicator" Property="Visibility" Value="Visible" />
                            <Setter TargetName="SelectorBorder" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger SourceName="SelectorBorder" Property="IsMouseOver" Value="True">
                            <Setter TargetName="InnerSelectorBorder" Property="Background" Value="#d5e8fd" />
                        </Trigger>
                        <Trigger Property="Interaction:Behaviors.IsColumnFiltered" Value="True">
                            <Setter TargetName="SelectorIndicator" Property="Visibility" Value="Visible" />
                            <Setter TargetName="SelectorBorder" Property="Visibility" Value="Visible" />
                            <Setter TargetName="SelectorIndicator" Property="Source" Value="../Resources/FilterIndicator.png" />
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>