ScrollViewer不在WPF中滚动

aza*_*arp 31 wpf scrollviewer

我在我的堆栈面板周围使用了一个包含ItemsControl的scrollviewer控件.如果ItemsControl中有许多项目,则可以滚动,但由于某种原因,它只是剪切项目.这是代码:

<StackPanel>
    <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible">
        <ItemsControl  Name="icEvents" Width="Auto" Height="100"  Background="AliceBlue" 
                       ItemsSource="{Binding Path=EventSources}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="Source:"/>
                        <TextBlock Text="{Binding Path=Source}" />
                        <TextBlock Text="Original Source:"/>
                        <TextBlock Text="{Binding Path=OriginalSource}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</StackPanel>
Run Code Online (Sandbox Code Playgroud)

Job*_*Joy 46

尝试围绕你的网格ScrollViwer而不是StackPanel.我认为StackPanel将提供与内部内容一样多的高度,因此这里Scrollviwer不能正常工作,因为它的高度不受其父控件的限制.

您可以从以下示例中了解该问题.

<StackPanel>
    <ScrollViewer>
        <ItemsControl >
            <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
        </ItemsControl>
    </ScrollViewer>
</StackPanel>
Run Code Online (Sandbox Code Playgroud)

上面的代码与您的代码类似,它不会为您提供滚动条.但是请参阅下面的代码,其中我只更改了StackPanela Grid(任何面板根据面板大小尊重其子节点的大小但是stackpanel没有)

<Grid>
    <ScrollViewer>
        <ItemsControl >
            <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" StrokeThickness="4" Width="200"/>
            <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
            <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" StrokeThickness="4"/>
        </ItemsControl>
    </ScrollViewer>
</Grid>
Run Code Online (Sandbox Code Playgroud)

更新:但是如果您确实需要使用,StackPanel那么您可能需要设置大小ScrollViwer以获取内容滚动

  • 但是如果你真的需要使用StackPanel,那么你可能需要设置ScrollViwer的大小来获取内容滚动,因为正如我之前所说的,StackPanel不尊重其子节点的高度或宽度.因此,当我们使用StackPanel时,我们必须设置高度和宽度 (2认同)

Edu*_*eni 24

您必须修复Scrollviewer的高度,但可以轻松绑定到StackPanel ActualHeight :(
测试代码)

<StackPanel Name="mypanel">
   <ScrollViewer Height="{Binding ElementName=mypanel, Path=ActualHeight}">
       <ItemsControl>
          <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" />
      </ItemsControl>
   </ScrollViewer>
</StackPanel>
Run Code Online (Sandbox Code Playgroud)

或者更好的是,如果您无法更改StackPanel的名称:

<StackPanel>
    <ScrollViewer Height="{Binding RelativeSource={RelativeSource FindAncestor, 
                        AncestorType={x:Type StackPanel}}, Path=ActualHeight}">
       <ItemsControl>
          <Rectangle Stroke="#FFC3C3C3"  Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3" Height="300" Fill="Black" Width="200"/>
          <Rectangle Stroke="#FFC3C3C3" Width="200" Height="300" Fill="Black" />
          <Rectangle Stroke="#FFC3C3C3"  Width="200" Height="300" Fill="Black" />
      </ItemsControl>
   </ScrollViewer>
</StackPanel>
Run Code Online (Sandbox Code Playgroud)

这是一个"你第一个"问题,StackPanel向ScrollViewer询问高度,ScrollViewer向StackPanel询问它的最大高度.

  • 感谢您提供如此丰富的答案!这肯定会派上用场! (2认同)

And*_*ndy 5

应该ItemsControl包含ScrollViewer,而不是相反。在你的情况下,它所ScrollViewer知道的只是它ItemsControl本身 - 它不知道内部项目。

尝试这样的事情:

<ItemsControl Name="icEvents" Width="Auto" Height="100"
    Background="AliceBlue"
    ItemsSource="{Binding Path=EventSources}">
    <ItemsControl.ItemTemplate>
        <DataTemplate> 
            <StackPanel>
                <TextBlock Text="Source:"/>
                <TextBlock Text="{Binding Path=Source}" />
                <TextBlock Text="Original Source:"/>
                <TextBlock Text="{Binding Path=OriginalSource}" />
            </StackPanel>  
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <ItemsPresenter Margin="5" />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>
Run Code Online (Sandbox Code Playgroud)

  • 不过,您需要在某处使用 ScrollViewer,因为默认情况下 ItemsControl 不会滚动。我已经使用了这段代码并且它有效,尽管您的答案可能也有效。 (2认同)