Question

早上好stackoverflow，

我目前在使用ItemsControl周围的滚动条时遇到问题。当ItemsControl内容（绑定到一个BindableCollection填充我的ListItemViewModel的实例）溢出我的窗口的边界时，滚动条显示，它看起来被禁用（中心没有较小的可拖动条）。因此，我无法滚动扩展内容。展开窗口显示以下内容。我已经尝试将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的高度将允许预期的滚动条行为，直到我的可绑定集合填充区域并溢出窗口（此时正常运行的滚动条被替换为没有可拖动条的滚动条）。

在我看来，当项目超出屏幕时会显示不同的滚动条，但是如果我删除了周围的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>

<强>视图模型

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

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

1 个答案: