ItemsControl [of Views] 滚动条在由 BindableCollection 填充时不起作用

Question

早上好，Whosebug，

我目前遇到 ItemsControl 周围滚动条的问题。当 ItemsControl 内容（绑定到充满我的 ListItemViewModel 实例的 BindableCollection）溢出我的 window 的边界时，滚动条显示，但是，它看起来已禁用（中心没有较小的可拖动条）。因此我无法滚动浏览扩展内容。展开 window 显示以下内容。我试过将 CanContentScroll 设置为 true 和 false，都没有用。

这是我的基本观点：

<Controls:MetroWindow x:Class="DataIntegrator.Views.BaseView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         xmlns:cal="http://www.caliburnproject.org"
         xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
         xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf">
<Grid AllowDrop="True" cal:Message.Attach="[Event Drop] = [Action AddItems($eventArgs)]" Height="Auto" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="14*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="28"/>
    </Grid.RowDefinitions>
    <ScrollViewer Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Stretch">
        <ItemsControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding List}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ContentControl cal:View.Model="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </ScrollViewer>
    <Button x:Name="Reprocess" Content="Reprocess Selected Elements" Grid.RowSpan="1" Grid.Row="1" Grid.ColumnSpan="1" Grid.Column="1"/>
</Grid>

添加到 ItemsControl 的项目视图：

<UserControl x:Class="DataIntegrator.Views.ListItemView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:DataIntegrator.Views"
         xmlns:cal="http://www.caliburnproject.org"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid Height="20" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*"/>
        <ColumnDefinition Width="1"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="1"/>
        <ColumnDefinition Width="30"/>
    </Grid.ColumnDefinitions>

    <TextBlock x:Name="File" Grid.ColumnSpan="1" Padding="3" Grid.Column="0" Background="#FF5A5A5A" Foreground="Cyan" ></TextBlock>
    <TextBlock x:Name="Type" Grid.ColumnSpan="1" Padding="3" Grid.Column="2" Foreground="Cyan" Background="#FF5A5A5A"></TextBlock>
    <Rectangle Grid.Column="4" Fill="#FF5A5A5A" ></Rectangle>
    <CheckBox x:Name="Reprocess" HorizontalAlignment="Center" VerticalAlignment="Center" Height="18" Width="18" Grid.Column="4" IsChecked="{ Binding Path=Reprocess, Mode=TwoWay }"/>
</Grid>

以及添加列表项的代码：

public void AddToList(string filePath)
    {
        List.Add(new ListItemViewModel(_eventAggregator){File=filePath});
        NotifyOfPropertyChange(() => List);
    }

其中变量 List 已声明并实例化为 BindableCollection。

我认为我可能在使用 caliburn.micro 时做错了，因为以下情况成立：

在不更改周围 XAML 的情况下，只需手动将 ItemsControl.Items 添加到 ItemsControl 即可实现预期的滚动条行为
设置 ItemsPanelTemplate StackPanel 的高度将允许预期的滚动条行为，直到我的可绑定集合填充区域并溢出 window（此时功能滚动条被替换为没有可拖动条的滚动条）。

在我看来，当项目超出屏幕时会显示不同的滚动条，但如果我删除周围的 ScrollViewer，那么当屏幕超出时根本没有滚动条。

对下一步该去哪里有点困惑，任何意见将不胜感激。

谢谢！

Answer 1

将 ScrollViwer 添加到 ControlTemplate

 <ItemsControl >
   <ItemsControl.Template>
    <ControlTemplate>
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <ItemsPresenter />
        </ScrollViewer>
    </ControlTemplate>
  </ItemsControl.Template>
</ItemsControl>

明确地说，我已经用下面的 XAML 对其进行了测试，它对我来说工作正常，因为我可以查看滚动查看器和滚动。

查看

<Grid Height="200">
    <ItemsControl Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding List}">
        <ItemsControl.Template>
            <ControlTemplate>
                <ScrollViewer VerticalScrollBarVisibility="Visible">
                    <ItemsPresenter />
                </ScrollViewer>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="MynewTest"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel ScrollViewer.CanContentScroll="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

ViewModel

public class ViewModel
{
    public ViewModel()
    {
        List = new ObservableCollection<string>() { "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "" };
    }
    private ObservableCollection<string> _MyProperty;
    public ObservableCollection<string> List
    {
        get { return _MyProperty; }
        set { _MyProperty = value; }
    }
}

ItemsControl [of Views] 滚动条在由 BindableCollection 填充时不起作用

ItemsControl [of Views] Scrollbar non functional when populated by BindableCollection

wpf

caliburn.micro