Click here to Skip to main content
12,399,471 members (58,223 online)
Click here to Skip to main content
Add your own
alternative version

Stats

9.8K views
288 downloads
4 bookmarked
Posted

ListBox and Panels in WPF

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

Introduction

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

Background

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"
       ...>
       
    <Window.Resources>
        ...
    </Window.Resources>

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

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

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

The results look like:

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 ...
}
else
{
    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.

History

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

License

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

Share

About the Author

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

You may also be interested in...

Comments and Discussions

 
SuggestionDockPanel Pin
DontSailBackwards13-Jan-15 15:57
memberDontSailBackwards13-Jan-15 15:57 
GeneralRe: DockPanel Pin
_Noctis_13-Jan-15 21:27
professional_Noctis_13-Jan-15 21:27 
QuestionHad Same Issue Pin
cjb11026-Sep-13 21:53
membercjb11026-Sep-13 21: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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 26 Sep 2013
Article Copyright 2013 by _Noctis_
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid