Pergunta

I have a Datagrid with two columns. First column contains a DataTemplate with a custom control in it. I have set MaxHeight and VerticalScrollbarvisibility=Auto on Datagrid. When the grid contains approx 20 rows scroll bar becomes visible. Upon scrolling quickly data in bottom or upper rows is not reflecting properly (perhaps due to virtualization, it shows data from previous cells). So i have a couple of questions -

  1. Is it possible to turn off virtualization? I am using silverlight 5.
  2. Is it possible to fix the grid headers and put the grid itself in a scroll viewer so that it gives the impression of grids own scroll bar.

Any help is greatly appreciated.

Thanks

Foi útil?

Solução

Yes it is possible to turn off virtualization.

I had exactly the same problem as you - this custom style turns off virtualization and works like a charm:

   <Style x:Key="NonVirtualizingDataGridStyle" TargetType="sdk:DataGrid">
    <Setter Property="RowBackground" Value="#EBEBED" />
    <Setter Property="AlternatingRowBackground" Value="#EBEBED" />
    <Setter Property="RowHeight" Value="25" />
    <Setter Property="GridLinesVisibility" Value="All"/>
    <Setter Property="HeadersVisibility" Value="Column" />
    <Setter Property="HorizontalGridLinesBrush" Value="#A0A0A0" />
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="SelectionMode" Value="Single" />
    <Setter Property="CanUserReorderColumns" Value="False" />
    <Setter Property="CanUserResizeColumns" Value="False" />
    <Setter Property="CanUserSortColumns" Value="True" />
    <Setter Property="AutoGenerateColumns" Value="True" />
    <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="sdk:DataGrid">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
                        <Grid x:Name="Root" Background="{TemplateBinding Background}">
                            <Grid.Resources>
                                <!--Start: TopLeftHeaderTemplate-->
                                <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
                                    <Grid x:Name="Root">
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Border BorderThickness="0,0,1,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                            <Rectangle Stretch="Fill" StrokeThickness="1">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                        <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                                        <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                                        <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                                        <GradientStop Color="#D1FFFFFF" Offset="1" />
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                        </Border>
                                        <Rectangle VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFDBDCDC" Grid.RowSpan="2" />
                                    </Grid>
                                </ControlTemplate>
                                <!--End: TopLeftHeaderTemplate-->

                                <!--Start: TopRightHeaderTemplate-->
                                <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
                                    <Grid x:Name="RootElement">
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                            <Rectangle Stretch="Fill">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                        <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                                        <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                                        <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                                        <GradientStop Color="#D1FFFFFF" Offset="1" />
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                        </Border>
                                    </Grid>
                                </ControlTemplate>
                                <!--End: TopRightHeaderTemplate-->
                            </Grid.Resources>

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <!-- Fill up the space in the header above the vertical scroll bar -->
                            <Grid Grid.Column="1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.5*" />
                                    <RowDefinition Height="0.5*" />
                                </Grid.RowDefinitions>
                                <!--<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Fill="#FF79C1C0" Grid.RowSpan="2"/>
                                <Rectangle x:Name="BackgroundGradient_Copy" Fill="#6BFFFFFF" VerticalAlignment="Stretch" Grid.RowSpan="1"/>-->
                                <Rectangle x:Name="BackgroundGradient" Stretch="Fill" 
                        Fill="{StaticResource CustomRed}" Grid.ColumnSpan="2" 
                        Grid.RowSpan="2"  />
                                <Border BorderBrush="Transparent" 
                            BorderThickness="1,1,1,1" 
                            Grid.ColumnSpan="3" Grid.RowSpan="3">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="0.5*"/>
                                            <RowDefinition Height="0.5*"/>
                                        </Grid.RowDefinitions>
                                        <!--dark-->
                                        <Border HorizontalAlignment="Stretch" 
                               Margin="0,0,0,0" x:Name="dark" 
                               Width="Auto" Grid.ColumnSpan="3" 
                               Grid.RowSpan="3" 
                               Background="#66000000" 
                               Opacity="0"/>
                                        <!--glow-->
                                        <Border Opacity="0"
                             HorizontalAlignment="Stretch" x:Name="glow" 
                             Width="Auto" Grid.RowSpan="2" 
                             Grid.ColumnSpan="3">
                                            <Border.Background>
                                                <RadialGradientBrush>
                                                    <RadialGradientBrush.RelativeTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform ScaleX="1.7" 
                                                   ScaleY="2.2"/>
                                                            <SkewTransform AngleX="0" 
                                                   AngleY="0"/>
                                                            <RotateTransform Angle="0"/>
                                                            <TranslateTransform X="-0.3" 
                                                   Y="-0.1"/>
                                                        </TransformGroup>
                                                    </RadialGradientBrush.RelativeTransform>
                                                    <GradientStop Color="#B2FFFFFF" 
                                           Offset="0"/>
                                                    <GradientStop Color="#00FFFFFF" 
                                           Offset="1"/>
                                                </RadialGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <!--shine-->
                                        <Border HorizontalAlignment="Stretch" 
                                     Margin="0,0,0,0" x:Name="shine" 
                                     Width="Auto" 
                                     Grid.ColumnSpan="3">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.5,0.9" 
                                            StartPoint="0.5,0.1">
                                                    <GradientStop Color="#99FFFFFF" 
                                            Offset="0"/>
                                                    <GradientStop Color="#33FFFFFF" 
                                            Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Grid>

                            <sdk:DataGridColumnHeader x:Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
                            <sdk:DataGridColumnHeadersPresenter Grid.Column="1" x:Name="ColumnHeadersPresenter" HorizontalAlignment="Left"/>
                            <sdk:DataGridColumnHeader x:Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
                            <Rectangle x:Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>

                            <ScrollViewer Style="{StaticResource RowScrollViewerStyle}" Grid.ColumnSpan="2" Grid.Row="1" Padding="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
                                <sdk:DataGridRowsPresenter x:Name="RowsPresenter" />
                            </ScrollViewer>
                            <Rectangle x:Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" />
                            <Rectangle x:Name="BottomLeftCorner" Fill="#FFE9EEF4" Grid.Row="2" Grid.ColumnSpan="2" />
                            <Grid Grid.Column="1" Grid.Row="2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Rectangle x:Name="FrozenColumnScrollBarSpacer" />
                                <!--<local:Navigator Margin="4,0,2,0" />-->
                                <ScrollBar x:Name="HorizontalScrollbar" Grid.Column="1" Orientation="Horizontal" Height="18" Margin="-1,0,-1,-1" />
                            </Grid>
                        </Grid>
                    </Border>
                    <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" CornerRadius="2" Background="#8CFFFFFF" Opacity="0"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

There is a more simple style used to turn off virtualization but the one above has modifications to freeze the grid headers. I have just dumped the style that i use, you may want to remove the styling - but the functionality is there.

This style will solve your 2 points.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top