Listbox within Listbox and scrolling problem in Windows Phone 7 Silverlight

Question

I have a Windows Phone 7 Silverlight application that has a listbox and within the item template it binds another listbox.

<ListBox x:Name="CouponsGrouping">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <TextBlock Text="Expires" />
        <ListBox ItemsSource="{Binding Coupons}" Margin="0,10,0,0">
          <ListBox.ItemTemplate>
            <DataTemplate>
              <StackPanel>
                <HyperlinkButton Content="{Binding StoreName}" HorizontalAlignment="Left"/>
                <TextBlock Text="{Binding CouponText}" Style="{StaticResource PhoneTextNormalStyle}" />
                <TextBlock Text="{Binding CouponType}" Style="{StaticResource PhoneTextNormalStyle}" />
                <Button Content="Press me" />
              </StackPanel>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

When I try to scroll (click and drag) the list from within the inner listbox the parent listbox doesn't scroll. If I scroll by clicking on the "Expires" texbox it scrolls fine. How can I make it so that when I scroll the inner listbox the parent listbox scrolls instead.

Thanks, in advanced.

Answer 1

Hey Jonas - Kevin from Tampa, actually I was just looking up this same question. I don't think this is really a poor UX based upon usage. What I did to resolve this was to actually use a grid rather than a stack panel for the data template of the outer ListBox. Then after I put the nested ListBox in the outer DataTemplate, I put a Rectangle with a transparent fill. You just need to make sure your Rectangle is tall and wide enough to mask the inner ListBox. My nested ListBox only has 2-3-4 items so it's really not an issue.

Make sense?