Click here to Skip to main content
14,386,278 members

ListBox and Panels in WPF

Rate this:
4.75 (3 votes)
Please Sign up or sign in to vote.
4.75 (3 votes)
26 Sep 2013CPOL
This tip shows the different results of using a ListBox in different panels, and the effects on scrolling.


This tip shows the different results of using a ListBox in different panels, and the effects on scrolling.


I've been designing an application and ran into an issue with a ListBox that wasn't having a ScrollViewer. A quick search on stackoverflow gave me the answer, but in case anyone else wants to have a look and see the differences and/or play around with this, here's the code/demo I came up with.

Using the ode

I'm using WPF 4 under Visual Studio 2012, with the MVVM Light package.

The RandomHelper was taken from here.

You can simply compile and run the code, or have a look for the .exe in the /bin/debug folder.

The main view model holds a ContentControl that points to a second ViewModel that holds the ListBox.

<Window x:Class="TestListBox.MainWindow"


    <Grid x:Name="LayoutRoot">
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        <TextBlock ...</TextBlock>
        <Border  ...>
            <ContentControl Content="{Binding Current_VM }"></ContentControl>

The second view model hosts the three panels inside a grid, to show different behavior:

<Grid >
        <RowDefinition Height="*" /> // row 0
        <RowDefinition Height="*" /> // row 1
        <RowDefinition Height="*" /> // row 2
        <RowDefinition Height="*" /> // row 3

    <Grid Grid.Row="0" ... >
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        <ListBox ItemsSource="{Binding MyCol}" Grid.Row="1" />

    <StackPanel Grid.Row="1" ... >
        <ListBox  ItemsSource="{Binding MyCol}" /

    <DockPanel Grid.Row="2" ... >
        <ListBox  ItemsSource="{Binding MyCol}" /

    <a:ApexGrid Grid.Row="3" ... >
        <ListBoxItemsSource="{Binding MyCol}" Grid.Row="1" />

The results look like:

Image 1

As you can see, having a ListBox in a StackPanel causes the ScrollViewer to disappear, since the StackPanel gives its children the entire size they need, rendering the collection without the ScrollViewer.

Points of Interest

If you're using ContentControl in WPF, and you're planning to have collections with scroll viewers, you might want to stick to Grids or DockPanel and avoid StackPanels (unless you want to wrap them in ScrollViewers, or want to give the controls specific height dimensions).

If you're new to MVVM, you might want to look at the source code and notice that Blendability happens with the use of the (IsInDesignMode) statement in InnerControlViewModel.

if (IsInDesignMode)
    Design code goes here ...
    Runtime code goes here...

So you can get an idea of what runtime data will look like without needing to actually run the code. (A good place to start looking at MVVM is Lauren Bugnion's site here.


  • V. 1 -> Original post
  • V. 1.1 -> Added an ApexGrid to the example, and updated the screenshot
  • V 1.2, Dec. 2nd, 2014 -> Updated code , downloads & fixed some typos.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Australia Australia
Coding since I Remember myself ... went through Basic on Commodore 64 to C# on an 8 core i7... In between worked with c, c++, java, assembler, php, pascal, JScript, SQL based DB's and a bit of NoSQL as well.

Love software, and I'm usually fidgeting around with technology software and hardware on my free time.

Comments and Discussions

SuggestionDockPanel Pin
DontSailBackwards13-Jan-15 16:57
MemberDontSailBackwards13-Jan-15 16:57 
GeneralRe: DockPanel Pin
_Noctis_13-Jan-15 22:27
professional_Noctis_13-Jan-15 22:27 
QuestionHad Same Issue Pin
cjb11026-Sep-13 22:53
Membercjb11026-Sep-13 22:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 26 Sep 2013


4 bookmarked