Fix scrollbars for a dynamic layout in a Listview/ListBox

Some colleagues at work had a problem today with a ListView that had a dynamic layout. Basically we had a ListView that contained an Expander as one of the CellTemplates, the Expander had another ListBox inside that contained several items. The problem with this was that the ScrollBar for the ListView (which contained all the Expanders) was freaking out and behaving like it was drunk. Here is the XAML for this.

<ListView ItemsSource="{Binding}" >
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Test">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Expander Header="Test">
                            <ListBox ItemsSource="{Binding}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding}"/>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </Expander>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

public Window1()
{
    DataContext = new[]
        {
            new [] { 50, 30, 20, 10, 40, 50, 70, 84, 20, 30, 50 },
            new [] { 50, 30, 20, 10, 40, 50, 70, 84, 20, 30, 50 },
            new [] { 50, 30, 20, 10, 40, 50, 70, 84, 20, 30, 50 },
        };
    InitializeComponent();
}

In order to fix this there is a magic trick

All you have to do set an attached property on the ListView to instruct it’s ScrollViewer that the Content cannot Scroll. so basically the XAML now would look like this

<ListView ItemsSource="{Binding}" ScrollViewer.CanContentScroll="False">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Test">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Expander Header="Test">
                            <ListBox ItemsSource="{Binding}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding}"/>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </Expander>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

As you can see all I changed here is adding the attached property ScrollViewer.CanContentScroll=”False” on the ListView, and viola the scrolling now works correctly

Edit: After having a chat with a fellow WPF Disciple, Andrew Smith, he pointed out that this solution will drop Virtualization support. So if you have a lot of data this is probably not the best solution for you.

November 18, 2008 - Posted by marlongrech | WPF, tips and tricks | | 4 Comments

4 Comments »

Great fix dude

Comment by Jonathan Caruana | November 19, 2008 | Reply
[...] Grech on how to Fix scrollbars for a dynamic layout in a Listview/ListBox Possibly related posts: (automatically generated)Silverlight 2.0 and ASP.NET tutorial: Getting [...]

Pingback by 2008 November 19 - Links for today « My (almost) Daily Links | November 19, 2008 | Reply
[...] Fix Scrollbars for a Dynamic Layout in a ListView/ListBox (Marlon Grech) [...]

Pingback by Dew Drop - November 19, 2008 | Alvin Ashcraft's Morning Dew | November 19, 2008 | Reply
Good article.
I prefer to use CurrentChanged rather than using selecteditemchanged in listview

Comment by Michael Leung | November 22, 2008 | Reply

« Previous | Next »

: About :

Marlon me = new Marlon();
while(me.UseCSharp) me.Happy = true;

I am currently working at Infusion Development as a Sofware Consultant. I love C# and addicted to the WPF technology…. Here in my blog you will find posts mainly on WPF yet sometimes I blog on other .Net stuff…. I also have an OpenSource project AvalonControlsLibrary that I constantly work on….. I am also an MVP for Client App (see my profile here)

I also happen to have the most beautiful daughter, Jasmine; Thanks Jasmine for being in my life, without you my life would be a mess

Besides programming I also like… mmm… what do I like… ooups, I think I need a hobby or something…..

Anyway, I hope you like my blog, feedback is always appreciated……..

Thanks for the support
Marlon
marlongrech AT gmail DOT com