WPF中ScrollViewer内的用户控件无法滚动

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>

- Onur

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>

- hijack

---

只有在我也为ScrollViewer设置Height时才有效。但是设置ScrollViewer的高度不是我想要的。 - Onur

尝试将Row0的RowDefinition更改为：<RowDefinition Height="*" /> - hijack

完成了，很高兴它起作用了。我最近也在与ScrollViewer苦战。 - hijack

如果ScrollViewer在TabItem内部，它也可以正常工作，就像我的原始版本一样。唯一的问题是不允许ScrollViewer使用尽可能多的空间（就像将高度设置为自动时的情况）。 - Onur

Answer 2

当您将 CanContentScroll 设置为 True 时， ScrollViewer 假定您的内容实现了 IScrollInfo（我猜不是这样）。

尝试将 ScrollViewer 上的 CanContentScroll 设置为false，这允许内容使用所需的所有空间，而 ScrollViewer 负责滚动。

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

- Joachim Kerschbaumer

---

将 CanContentScroll 设置为 false 没有帮助。我现在认为原因是 ScrollViewer 本身认为它可以使用无限的空间，因此不需要滚动内容，因为它适合于无限大的 ScrollViewer。这是因为将 ScrollViewer 设置为定义的高度/宽度才能启用滚动。但我不想限制 ScollViewer 的大小，它应该使用所有可用的空间。 - Onur

Answer 3

看起来你滚动视图中的内容与视图本身大小相同，因此没有可滚动的内容？

如果你做了类似的事情

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

    </Grid>
</ScrollViewer>

如果您将网格的高度设置为大于查看器可以显示的高度，那么这个网格将与滚动查看器具有相同的大小，并且将始终不允许滚动。但是如果您将网格的高度设置为查看器可以显示的高度以下，则不会出现滚动条。

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

    </Grid>
</ScrollViewer>

- Andy

---

将 <my:MY_USER_CONTROL> 的高度设置为固定值并没有真正帮助。控件现在有了固定高度，但无法滚动。将 ScrollViewer 的高度设置为固定值可以使内容滚动，但我真的希望 ScrollViewer 占用可用空间。 - Onur