Scrolling in nested Listbox wpf

Question

5.00/5 (2 votes)

See more:

Hi Friends

Hope you all are doing good.

I have few questions about WPF List BOX

Some Background:

We are trying to build a scheduling control like outlook with some custom functionality.
I have already gone through the similar post in Code Project but we tend to take slightly different approach (trying to use MVVM approach).

Problem:
Currently we have a Listbox with 3 items. Each item in the list box is another Listbox with borders as sub items. For E.g. the XAML code looks like this.

XML

<Grid Height="500" Width="500">
        <ListBox Name="MasterListBox" HorizontalAlignment="Stretch">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem >
                <ListBox Name="Child1" Height="240">
                    <ListBoxItem >
                        <Border Width="200" removed="Red" Height="40"></Border>
                    </ListBoxItem>
                    <ListBoxItem >
                        <Border Width="200" removed="Blue" Height="40"></Border>
                    </ListBoxItem>
                    <ListBoxItem >
                        <Border Width="200"  removed="Green" Height="40"></Border>
                    </ListBoxItem>
                </ListBox>
            </ListBoxItem>
            <ListBoxItem >
                <ListBox Name="Child2" Height="240">
                    <ListBoxItem >
                        <Border Width="200" removed="Yellow" Height="40"></Border>
                    </ListBoxItem>
                    <ListBoxItem >
                        <Border Width="200" removed="Green" Height="40"></Border>
                    </ListBoxItem>
                    <ListBoxItem >
                        <Border Width="200"  removed="Pink" Height="40"></Border>
                    </ListBoxItem>
                </ListBox>
            </ListBoxItem>
            <ListBoxItem >
                <ListBox Name="Child3" Height="240">
                    <ListBoxItem >
                        <Border Width="200" removed="Aqua" Height="40"></Border>
                    </ListBoxItem>
                    <ListBoxItem >
                        <Border Width="200" removed="Beige" Height="40"></Border>
                    </ListBoxItem>
                    <ListBoxItem >
                        <Border Width="200"  removed="Brown" Height="40"></Border>
                    </ListBoxItem>
                </ListBox>
            </ListBoxItem>
        </ListBox>
    </Grid>

The problem is when I click on the 1st item(Child1) of the MasterListBox in the white area and drag right, the MasterListBox list box scroll to right, But when I click on the subitem (for e.g. say red border) and drag right the MasterListBox doesn’t scroll right.
I am aware that I am trying to drag the item of the inner list box and that’s the reason the outer list box is not scrolling, But it there a way we can override this. I want to select the inner item also so cannot set IsHitTestVisible="False" for inner item.

Thanks you for looking into this. Your help is greatly appreciated.

Regards
Saurabh

Posted 26-Jul-11 22:38pm

saurabhd13

Updated 27-Jul-11 4:22am

Chris Maunder772.9K

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Heath Stewart · Answer 1 · 2011-07-27T05:47:00

Solution 1

Rather than nesting ListBox controls within another ListBox which, as you observed, complicates the user experience; why not use a DatGrid which gives you the sort of columnar data view you seem to want? Assuming you want to display borders in different colors in your real-world application, you could restyle the CellStyle and bind a BorderBrush to the converted color value.

Posted 27-Jul-11 5:47am

Heath Stewart

Comments

saurabhd13 28-Jul-11 11:17am

Hi Stewart,

First of all thanks for the reply and the suggestion.
The reason we are using ListBox is as we need to use custom panels which placed the item in appropriate positions
and it fits our VM(MVVM) perfectly.
Just that we have the Scrolling issue with list box . But yes if we don’t have alternative we will shift to Data Grid(Just for replacing the Main List box).
Again the issue is if we use dataGrid and Place the list views inside it and try to drag the item the Data grid wont scroll.

But thanks again for the Suggestion

Regards
Saurabh Dighade