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

Question

Good morning stackoverflow,

I am currently experiencing an issue with the scrollbar surrounding my ItemsControl. When the ItemsControl contents (Bound to a BindableCollection filled with instance of my ListItemViewModel) overflow the bounds of my window, the scrollbar shows, however, it looks disabled (no smaller draggable bar in the center). Thus I am unable to scroll through the extended contents. Expanding the window shows the contents below. I have tried setting CanContentScroll to true and false, neither has worked.

Here is my base view:

<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>

the view of items being added to the 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>

and the code adding the list items:

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

Where the variable List has already be declared and instantiated as BindableCollection.

I believe I may be doing something wrong with caliburn.micro as the following holds true:

1. Without changing the surrounding XAML, simply adding ItemsControl.Items to the ItemsControl manually allows for the expected scrollbar behaviour
2. Setting the height of the ItemsPanelTemplate StackPanel will allow expected scrollbar behaviour, until my bindable collection populates the area and overflows the window (at which time the functioning scrollbar is replaced with one without the draggable bar).

It seems to me like a different scrollbar is presenting when the items overrun the screen, but if I remove the surrounding ScrollViewer then there is no scrollbar at all when the screen is overrun.

Kind of confused of where to go next, any input will be greatly appreciated.

Thanks!

Answer 1

Add ScrollViwer to ControlTemplate

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

So to be clear i have tested it with below XAML and it works fine for me as i can view scroll viewer and scroll.

View

<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; }
    }
}