Datagrid Grouping Template, when scroll screen not repaint properly

Apr 27, 2010 at 9:43 PM
This is how I defined my Style
            <Style x:Key="dataGridGroupTemplate" TargetType="{x:Type GroupItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type GroupItem}" >
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding Path=IsBottomLevel}" Value="True">
                                    <Setter TargetName="gridButtomLevelTemplate" Property="Grid.Background" Value="{StaticResource GroupHeaderLevelTwoBackgroundBrush}" />
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                            <Grid >
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid x:Name="gridButtomLevelTemplate" Background="{StaticResource GroupHeaderLevelOneBackgroundBrush}" VerticalAlignment="Center" MouseLeftButtonDown="gridButtomLevelTemplate_MouseLeftButtonDown" >
                                    <Grid.Resources>
                                        <Style TargetType="{x:Type TextBlock}">
                                            <Setter Property="FontSize" Value="11" />
                                            <Setter Property="FontWeight" Value="Bold" />
                                            <Setter Property="TextAlignment" Value="Right" />
                                            <Setter Property="Foreground" Value="{StaticResource DefaultControlForegroundBrush}" />
                                            <Setter Property="VerticalAlignment" Value="Center" />
                                        </Style>
                                    </Grid.Resources>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="100" />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton Grid.Column="0" x:Name="btnShowHide" IsChecked="True" Margin="3.5" />
                                    <TextBlock Grid.Column="1" Text="Test" TextAlignment="Left" />
                                    <TextBlock Grid.Column="2" Text="Test1" TextAlignment="Left" />
                                    <TextBlock Grid.Column="3" Text="Test2" />
                                </Grid>
                                <ItemsPresenter Visibility="{Binding ElementName=btnShowHide, Path=IsChecked, Converter={StaticResource booleanToVisibilityConverter}}" Grid.Row="1" Margin="11,0,0,3.5" />                               
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

This is how I applied my Style to my datagrid

                            <dg:DataGrid x:Name="oPortGridMain"                                        
                                         AutoGeneratingColumn="oGridMain_AutoGeneratingColumn"
                                         ColumnHeaderStyle="{StaticResource GenericColumnHeaderStyle}"
                                         Grid.Row="1"
                                         Grid.Column="0"     
                                         RowHeaderWidth="0"
                                         SelectionChanged="oPortGridMain_SelectionChanged"
                                         Width="Auto"
                                         Style="{StaticResource DefaultDataGridStyles}"
                                          >
                                <dg:DataGrid.GroupStyle>
                                    <GroupStyle ContainerStyle="{StaticResource dataGridGroupTemplate}">
                                        <GroupStyle.Panel>
                                            <ItemsPanelTemplate>
                                                <dg:DataGridRowsPresenter />
                                            </ItemsPanelTemplate>
                                        </GroupStyle.Panel>
                                    </GroupStyle>
                                </dg:DataGrid.GroupStyle>
                            </dg:DataGrid>

These all seemed to be working fine, but the problem is that when I use the scroll bar scrolling to the right, after I scroll back, the first few column of my datagrid is not repainted properly!  The first few rows are missing part of the contents, depends on how quickly I scroll back.  I am wondering if this is some kind of datagrid defect, or maybe someone could point out what I did wrong in my Datagrid Template for grouping.

Thanks!