Missing vertical scrollbar in grouped WPF ListBox

Question

Hi apologies if this is an obvious question; I'm fairly new to WPF. I'm trying to create a 'grouped' listbox similar to the image below. With google's help I've just about managed to get it working except for some reason I get get the vertical scrollbar to be visible. Does any body have any ideas? This is driving me nuts! Thanks

The code I am using is as follows:

public class SampleData
{
    public string Name { get; set; }
    public string Group { get; set; }

    public SampleData(string name, string group)
    {
        this.Name = name;
        this.Group = group;
    }
}


public partial class MainWindow : Window
{
    private ObservableCollection<SampleData> _items = new ObservableCollection<SampleData>();

    public ObservableCollection<SampleData> Items
    {
        get { return _items; }
    }

    public MainWindow()
    {
        InitializeComponent();

        _items.Add(new SampleData("Item1", "Group1"));
        _items.Add(new SampleData("Item2", "Group1"));
        _items.Add(new SampleData("Item3", "Group1"));
        _items.Add(new SampleData("Item4", "Group1"));
        _items.Add(new SampleData("Item5", "Group1"));
        _items.Add(new SampleData("Item6", "Group1"));

        _items.Add(new SampleData("Item7", "Group2"));
        _items.Add(new SampleData("Item8", "Group2"));
        _items.Add(new SampleData("Item9", "Group2"));
        _items.Add(new SampleData("Item10", "Group2"));
        _items.Add(new SampleData("Item11", "Group2"));
        _items.Add(new SampleData("Item12", "Group2"));
        _items.Add(new SampleData("Item13", "Group2"));
        _items.Add(new SampleData("Item14", "Group2"));
    }
}

and in the xaml,

  <CollectionViewSource x:Key="groupedSampleData" Source="{Binding ElementName=main, Path=Items }">
    <CollectionViewSource.GroupDescriptions>
      <PropertyGroupDescription PropertyName="Group" />
    </CollectionViewSource.GroupDescriptions>
  </CollectionViewSource>

  <Style x:Key="LBStyle" TargetType="{x:Type ListBox}">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalOnly"/>
  </Style>


<ListBox Grid.Row="0" Style="{StaticResource LBStyle}" ItemsSource="{Binding Source={StaticResource groupedSampleData}}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0" >
  <ListBox.Template>
    <ControlTemplate TargetType="{x:Type ListBox}">
      <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" PanningMode="VerticalOnly">
        <StackPanel>
          <ItemsPresenter/>
        </StackPanel>
      </ScrollViewer>
    </ControlTemplate>
  </ListBox.Template>

  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <Border Width="96" Height="96" Margin="4" Background="#DDD"/>
        <TextBlock Margin="4,0,4,4" Text="{Binding Path=Name}" HorizontalAlignment="Center"/>
      </StackPanel>
    </DataTemplate>
  </ItemsControl.ItemTemplate>

  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>

  <ItemsControl.GroupStyle>
    <GroupStyle>
      <GroupStyle.Panel>
        <ItemsPanelTemplate>
          <VirtualizingStackPanel/>
        </ItemsPanelTemplate>
      </GroupStyle.Panel>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
          <TextBlock Margin="4,16,4,4" FontWeight="Bold" FontSize="15" Text="{Binding Path=Name}"/>
        </DataTemplate>
      </GroupStyle.HeaderTemplate>
    </GroupStyle>
  </ItemsControl.GroupStyle>
</ListBox>

Answer 1

Remove this

<ListBox.Template>
    <ControlTemplate TargetType="{x:Type ListBox}">
      <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" PanningMode="VerticalOnly">
        <StackPanel>
          <ItemsPresenter/>
        </StackPanel>
      </ScrollViewer>
    </ControlTemplate>
</ListBox.Template>

Listbox has its own default scrollviewer inside the template, why do you need to change the template of the listbox if all I see is the ScrollViewer and a StackPanel? And then you'll redefine the ItemPanelTemplate to a WrapPanel.

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

There is a static class called ScrollViewer where you can control its scrollviewer's properties.

<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto"/>