ScrollViewer 中的用户控件在 WPF 中不滚动

Question

我的主窗口中有以下代码（缩写）：

虽然我设置了滚动条可见性和CanContentScroll 属性，但它不会滚动。我认为这与我的用户控制有关。

<Window>
   <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
       <TabControl  Grid.Column="0" Grid.Row="0"  HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Height="Auto" Width="Auto">
          <TabItem Header="TEST">
            <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <my:MY_USER_CONTROL  x:Name="myUserControl"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ScrollViewer.CanContentScroll="True" />
            </ScrollViewer>
        </TabItem>
      </TabControl>
      <Button Grid.Column="0"  Grid.Row="2" >a button</Button>
      <WrapPanel Grid.Column="0" Grid.Row="3" >
      </WrapPanel>
    </Grid>
  </Window>

我的用户控件的缩写结构：

<UserControl>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="183*" />
            <ColumnDefinition Width="117*" />
        </Grid.ColumnDefinitions>
        <TreeView ItemsSource="{Binding Children}" Grid.ColumnSpan="2">
            <TreeView.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">

                    <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
                    <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />

                    <Setter Property="FontWeight" Value="Normal" />
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="FontWeight" Value="Bold" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TreeView.ItemContainerStyle>

            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}" >
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.Children>
                            <TextBlock Background="LightGray"  Padding="2" Margin="2" Grid.Row="0" Grid.Column="0" Text="{Binding Name}" />
                            <TextBlock Padding="2" Margin="2" Grid.Row="0" Grid.Column="1" Text="{Binding Content}" />
                        </Grid.Children>
                    </Grid>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</UserControl>

Answer 1

你需要这样设置。我将 Row0 的 RowDefinition 更改为 Height="*" 所以它将使用尽可能多的空间。然后在 ScrollViewer 和 TabControl 之间更改位置。所以 TabControl 是 ScrollViewer 的一个内容。

<Window>
 <Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <ScrollViewer HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Auto"
              Grid.Column="0" Grid.Row="0"> 
   <TabControl  HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch"
               Height="Auto" Width="Auto">
      <TabItem Header="TEST">
        <my:MY_USER_CONTROL x:Name="myUserControl"  
                            HorizontalAlignment="Stretch"              
                            VerticalAlignment="Stretch" 
                            ScrollViewer.CanContentScroll="True" />          
     </TabItem>
  </TabControl>
 </ScrollViewer>
 <Button Grid.Column="0"  Grid.Row="2" >a button</Button>
 <WrapPanel Grid.Column="0" Grid.Row="3" >
 </WrapPanel>
</Grid>

Answer 2

当您将 CanContentScroll 设置为 True 时，ScrollViewer 会假定您的内容实现了 IScrollInfo（我猜没有）。

尝试将 ScrollViewer 上的 CanContentScroll 设置为 false，这允许内容使用尽可能多的空间，并且 ScrollViewer 负责滚动。

但是，根据控件的大小、视觉效果的数量等，这可能会成为性能问题（例如，当 CanContentScroll 设置为 False 时没有 UI 虚拟化)。

Answer 3

看起来您的滚动查看器中的内容与查看器的大小相同，因此没有可滚动的内容？

如果你做类似的事情

<ScrollViewer HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid Background="Red">

    </Grid>
</ScrollViewer>

那么网格与滚动查看器的大小相同，并且永远不允许滚动，如果您将网格的高度设置为超过查看器可以显示的高度，您将获得一个滚动条。

<ScrollViewer HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid Background="Red" Height="500">

    </Grid>
</ScrollViewer>