WP7: Extra Wide, Horizontally Wrapping PanoramaItem with dynamic ListBox

I spent several hours last night trying to find a good example of an extra wide, horizontally wrapping Panorama Item but couldn’t find one.  Several of the built in hubs have this layout and I knew there were third parties who had done the same so it should be possible.  I like how this layout can extend the use of Tiles to within applications.  Notice how the first panoramaItem is wider than the others for the Office hub:

Ended up finding two posts, which combined, resulted in this layout.

The first was a post from Dave Relyea which provided the horizontal wrapping for the panoramaItem.  This works great if you are only adding static content to the page but I want to use a dynamic listbox.

The second was a msdn forum post which describes how to make a ListBox wrap horizontally.

The steps to reproduce this layout are:

  1. Set the orientation on your ParoramaItem to “Horizontal”
  2. Set a width on your PanoramaItem, this will determine how much content extends to the right
  3. Add a reference to the Silverlight Toolkit for WP7
  4. Set the ItemsPanelTemplate on your ListBox to a WrapPanel with Horizontal Orientation
  5. Set the ListBox.Template to a ItemsPresenter ControlTemplate
  6. Create the ListBox.ItemTemplate to your liking

Here is the code:

<controls:PanoramaItem Header="near me" Orientation="Horizontal" Width="1000">
                <!–Double line list with image placeholder and text wrapping–>
                <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Controls:WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.Template>
                        <ControlTemplate>
                            <ItemsPresenter />
                        </ControlTemplate>
                    </ListBox.Template>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Rectangle Height="200" Width="200" Fill="#FFE5001b" Margin="20"/>
                                <TextBlock Text="{Binding LineOne}" Margin="20" Style="{StaticResource PhoneTextExtraLargeStyle}" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>

 

I don’t love taking another dependency (the Silverlight Toolkit) but it works.  If you have a better way please share.

2 thoughts on “WP7: Extra Wide, Horizontally Wrapping PanoramaItem with dynamic ListBox

Leave a Reply