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:
- Set the orientation on your ParoramaItem to “Horizontal”
- Set a width on your PanoramaItem, this will determine how much content extends to the right
- Add a reference to the Silverlight Toolkit for WP7
- Set the ItemsPanelTemplate on your ListBox to a WrapPanel with Horizontal Orientation
- Set the ListBox.Template to a ItemsPresenter ControlTemplate
- 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.
Pingback: Tweets that mention WP7: Extra Wide, Horizontally Wrapping PanoramaItem with dynamic ListBox « dotnet Catch -- Topsy.com
Thanks, this was usefull for me. I tried a couple of things to get a wide panoramaitem but didn’t add the Orientation=”Horizontal” which is absolutely a requirement.