Search code examples
uwpwindows-community-toolkit

DataGrid XAML control can't be scrolled by touch


I'm developing a uwp app. The app has a DataGrid XAML control.

My problem is that I can scroll it by mouse, but I can't scroll it by touch. Curiously, I can scroll it by two fingers touch.

Please let me know how to fix the problem.

Here is my code.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Loaded="ContentGrid_Loaded">
        <SplitView x:Name="spritView"
                   IsPaneOpen="{Binding ElementName=HamburgerButton,Path=IsChecked, Mode=TwoWay}"
                   DisplayMode= "CompactInline"
                   PaneBackground="LightGray"
                   PanePlacement="Left"
                   CompactPaneLength ="0"
                   OpenPaneLength="200"
                       Margin="0,48,0,0"
                       >
            <SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <ScrollViewer>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                            <Button x:Name="BtExit" Click="BtExit_Click">
                                <Image Source="/pictuer/left_arrow.png" Height="32"/>
                            </Button>
                            <TextBlock Text="Category" Width="140" Style="{StaticResource TextBlockFontSize1}"/>
                        </StackPanel>

                    </ScrollViewer>
                </Grid>
            </SplitView.Pane>
            <ScrollViewer ZoomMode="Enabled"
                          ScrollViewer.VerticalScrollBarVisibility="Auto"
                          ScrollViewer.VerticalScrollMode="Auto"
                          ScrollViewer.HorizontalScrollBarVisibility="Auto"
                          ScrollViewer.HorizontalScrollMode="Auto"
                          >
                <StackPanel Background="Snow" >
                    <controls: x:Name="dataGrid" AutoGenerateColumns="False"
                                           GridLinesVisibility="All" AlternatingRowBackground="LightCyan"
                                       ItemsSource="{Binding DefuctLists}">
                        <controls:DataGrid.Columns>
                            <controls:DataGridTextColumn Header="Category" Binding="{Binding Item_Lb}" IsReadOnly="True" />
                        </controls:DataGrid.Columns>

                    </controls:DataGrid>
                    <Border Style="{StaticResource borderLineLightGray}" Margin="0,8,0,0"/>
                </StackPanel>
            </ScrollViewer>

        </SplitView>

    </Grid>

Solution

  • DataGrid XAML control can't be scrolled by touch

    For checking your code, I have a little confused, why you insert DataGrid into ScrollViewer, and why you set the DataGrid parent panel as StackPanel that will make the actual height of DataGrid larger not the content's height, and it will make DataGrid could not be scrolled.

    If we remove ScrollViewer and replace StackPanel with Grid, and the DataGrid will response touch scroll.

    <SplitView.Content>
        <Grid>
            <controls:DataGrid
                x:Name="dataGrid"
                AlternatingRowBackground="LightCyan"
                AutoGenerateColumns="False"
                GridLinesVisibility="All"
                >
                <controls:DataGrid.Columns>
                    <controls:DataGridTextColumn
                        Binding="{Binding}"
                        Header="Category"
                        IsReadOnly="True"
                        />
                </controls:DataGrid.Columns>
            </controls:DataGrid>
        </Grid>
    </SplitView.Content>