PanoramaItem

If you want to implement vertical scrolling in the same style as the horizontal scrolling provided by the Panorama control you need to use an Items collection based on the the PanoramaItem class. This is a general purpose container that implements the same swipe scrolling mechanism but in a vertical direction.

Unlike the Panorama control it doesn't have an items collection but a single content property. Of course you can put more than one object inside a PanoramaItem simply by the standard technique of putting a more general container or layout panel in first.

To see this in action simply surround the ListBox tags with PanoramaItem tags. That is:

      Title="my application" 
      Name="Panorama1">
 
  
      Margin="0,5,0,5" 
      FontSize="56">
   
     List item 1 
   
   
     List item 2
   
   ...
   
     List item 6
   
  
 
...

If you try this out you should be able to see that the vertical scrolling now works in the same way as the horizontal scroll and it does continue to move after the mouse has stopped moving.

As well as the grand principles of operation it is also worth knowing some of the lesser properties of the Panorama control. For example, if you set a background image to the one used in the initial generated code:

       "PanoramaBackground.png"/>

Now as you scroll horizontally the background image scrolls as one continuous graphic. This creates an even stronger illusion for the user that the Panorama is a single extended surface. Notice that the background doesn't scroll vertically.

The same horizontal scrolling action occurs with the title that you set using the Title property.

The generated XAML

From here you are ready to start to follow some of the more advanced ways of using the Panorama control. The generated code puts the data into the Panorama control using databinding and controls its appearance using a data template. You should find both of these approaches useful in any project that acquires data either from a database or more likely from web page or web service. The example in the Microsoft Lab is of an application that reads an RSS feed and displays the resulting text and images in a four page Panorama layout.

The generated Panorama project imposes rather more structure on the application than just a haphazard use of databinding. It uses two data objects to generate a view of the data which is presumably intended to be obtained from a Model component - the view approach being on the way to adopting the currently fashionable Model View Controller architecture (or it could be that we are supposed to adopt a Model View ViewModel approach to the design).

Now that you know how the Panorama control works you should be able to work out how the generated code fits in - but to help here is a brief outline of what is going on.

The generated XAML creates a Panorama control with two PanoramaItems. Each PanoramaItem contains a ListBox which in turn contains a StackPanel and depending on its position some other display objects. There are lots of details about how the control is setup but the key facts are - the Panorama control will be data bound, usually in code, to a collection object which will provide the data it displays. Each of the  ListBox is data bound to the Items property of the collection object. This means that each item in the collection object is bound to one of the ListBoxes. The ListBoxes in the demo code contain two TextBlocks within the StackPanel which are bound to the LineOne and LineTwo properties of the Item object that the ListBox is bound to. When the program is run the TextBlocks are automatically generated to display as many items as there are in the collection because it is defined as the ItemTemplate.

So basically the Panorama object has been set up to display the items contained in a collection object that it will be bound to later. Each item is displayed using the ItemTemplate so generating a populated ListBox and display page.  Notice also that the same data is used for each of the PanoramaItems - this is just a demo - and hence the two pages show the same data in two slightly different ways.

Now to the code.

<ASIN:0735643350>

<ASIN:1430232161>