如何在 UWP 中的滚动查看器中设置滚动查看器答案

【问题标题】：How to set scroll-viewer inside scroll-viewer in UWP如何在 UWP 中的滚动查看器中设置滚动查看器
【发布时间】：2019-12-10 22:05:58
【问题描述】：

我想在滚动查看器中显示滚动查看器。父滚动查看器应该垂直工作，子滚动查看器可以水平和垂直工作。

当我调整页面大小时，我尝试在父滚动查看器中添加整个网格，父滚动查看器不起作用并且子滚动查看器是水平工作而不是垂直。

 <Grid>
     <VisualStateManager> ...
     <ScrollViewer  >
    <Grid HorizontalAlignment="Stretch" Height="1000" Margin="0,0,0,0" VerticalAlignment="Top">
         <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="COne" Width="59"/>
            <ColumnDefinition x:Name="CTwo" Width="31*"/>
            <ColumnDefinition x:Name="CThree" Width="44*"/>
            <ColumnDefinition x:Name="CFour" Width="53*"/>
            <ColumnDefinition x:Name="CFive" Width="116*"/>
            <ColumnDefinition x:Name="CSix" Width="40*"/>
            <ColumnDefinition x:Name="CSeven" Width="262*"/>
            <ColumnDefinition x:Name="CEight" Width="234*"/>
            <ColumnDefinition x:Name="Cnine" Width="350*"/>
             </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="ROne" Height="45*"/>
            <RowDefinition x:Name="RTwo" Height="23*"/>
            <RowDefinition x:Name="RThree" Height="432*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

      <Border CornerRadius="5" extensions:Mouse.Cursor="Hand" BorderBrush="#E1E1E1" BorderThickness="1" Grid.ColumnSpan="8" Margin="7,18,31,395" Grid.Column="1" Grid.Row="2" >


            <ScrollViewer  x:Name="Gridscroller" HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Auto"    Grid.ColumnSpan="8"  Grid.Column="1" Grid.Row="2" >
                <Toolkit:DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible"   extensions:Mouse.Cursor="Hand"   Style="{StaticResource GridBackground}"   BorderBrush="Transparent"  BorderThickness="5"   AllowFocusOnInteraction="False" x:Name="UserListView"  SelectionMode="Single"     FontSize="16" RelativePanel.AlignLeftWithPanel="True" Grid.ColumnSpan="8" Grid.Column="1" Grid.Row="2" OrderChanged="UserListView_OrderChanged" Tapped="UserListView_Tapped" >
.
.
.
  </Toolkit:DataGrid>
            </ScrollViewer>

        </Border>

 <TextBlock FontFamily="{StaticResource inventorySemiBoldFont}" Foreground="#444444" FontSize="13" Visibility="Visible"  x:Name="SearchMessage" Grid.Column="3" HorizontalAlignment="Left" Margin="0,74,0,0" Grid.Row="2"  VerticalAlignment="Top" Grid.ColumnSpan="4" Width="391"/>


        <StackPanel HorizontalAlignment="Center"  Margin="0,486,32,0" Grid.Row="2" VerticalAlignment="Top"  Grid.ColumnSpan="7" Grid.Column="2"  />

</Grid>
 </ScrollViewer>
</Grid>

【问题讨论】：

标签： xaml win-universal-app uwp-xaml

【解决方案1】：

在ScrollViewer中，只有在内容宽/高大于容器宽/高时才会滚动，但是ScrollViewer的内部可视区域是无限的，所以如果想让子ScrollViewer工作，需要为其设置宽度/高度。

喜欢：

<ScrollViewer>
    <ScrollViewer width="500" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto">
        <!-- Content here -->
    </ScrollViewer/>
</ScrollViewer>

最好的问候。

【讨论】：