Scrolling in nested Listbox wpf

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 items. For E.g. the XAML code looks like this

<ListBox Name="MasterListBox" HorizontalAlignment="Stretch" Height="500" Width="500">
              <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem >
            <ListBox Name="Child1" Height="240">
                <ListBoxItem>
                    <Border Width="200" Background="Red" Height="40"></Border>
                </ListBoxItem>
                <ListBoxItem >
                    <Border Width="200" Background="Blue" Height="40"></Border>
                </ListBoxItem>
                <ListBoxItem >
                    <Border Width="200"  Background="Green" Height="40"></Border>
                </ListBoxItem>
            </ListBox>
        </ListBoxItem>
        <ListBoxItem >
            <ListBox Name="Child2" Height="240">
                <ListBoxItem >
                    <Border Width="200" Background="Yellow" Height="40"></Border>
                </ListBoxItem>
                <ListBoxItem >
                    <Border Width="200" Background="Green" Height="40"></Border>
                </ListBoxItem>
                <ListBoxItem >
                    <Border Width="200"  Background="Pink" Height="40"></Border>
                </List开发者_如何学CBoxItem>
            </ListBox>
        </ListBoxItem>
        <ListBoxItem >
            <ListBox Name="Child3" Height="240">
                <ListBoxItem >
                    <Border Width="200" Background="Aqua" Height="40"></Border>
                </ListBoxItem>
                <ListBoxItem >
                    <Border Width="200" Background="Beige" Height="40"></Border>
                </ListBoxItem>
                <ListBoxItem >
                    <Border Width="200"  Background="Brown" Height="40"></Border>
                </ListBoxItem>
            </ListBox>
        </ListBoxItem>
</ListBox>

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

One way to do this would be to create drag-to-scroll functionality using the inner ListBox's OnPreviewLeftMouseDown,OnPreviewMouseMove, and OnPreviewMouseUp events to implement the desired effect.

Another way is to find the event(s) responsible for the drag-to-scroll functionality within the inner ListBox and to override the event handler so that the event gets routed to the outer ListBox.