Basic Panoramas

Although the majority of examples start off with something quite complicated I have found that doing the reverse is often the best way to learn how something works. In this case we will strip the Panorama control right back to its basics and then build up something a little more interesting.

The basic structure of the Panorama control is that it has an items collection which can be used just like any other ItemsControl. You can add object elements to the items collection and each one will be displayed on a separate page that the user can swipe scroll to.

For example, the XAML :

       Title="my application" 
       Name="Panorama1">
 This is item one
 This is item two
 This is item three

Creates a display with three pages each one containing a single line of text.

You can also add items in code. For example:

Panorama1.Items.Add(new TextBlock() 
            { Text = "Dynamic Item" });

You can add a mixture of items to the Panorama control to create more complicated layouts. For example

      Title="my application" 
      Name="Panorama1">
 
    This is item one
 
 
  
  
    Text below an Ellipse
  
 

This adds two items - a TextBlock on one page and a StackPanel with an ellipse and another TextBlock on a second page.

At this point you might be wondering what happens if the object that you use as an item is bigger than the width of a screen?

For example suppose you try to draw an Ellipse that is 800 pixels wide? Will it straddle two item pages in the Panorama object? The simple answer is no. The control truncates any graphics to a single page so that the big Ellipse would only appear on its own item page and would be truncated a the edges of the adjacent pages.

You can easily create simple layouts on each of the pages that you need. You can add event handlers to the controls in the layout in the usual way. For example, if you add a button to the StackPanel:

    Title="my application" 
    Name="Panorama1">
 
   This is item one
 
 
 
 
  Text below an Ellipse
 
 
         Height="72" 
         HorizontalAlignment="Left" 
         Margin="200,300,0,0" 
         Name="button1" 
         VerticalAlignment="Top" 
         Width="160" 
         Click="button1_Click" />
 

You can use the properties window to add a click event handler or add the handler in code:

private void button1_Click(
    object sender, RoutedEventArgs e)
{
 MessageBox.Show("Button clicked");
}

Now when you swipe scroll to the button clicking it displays the MessageBox.

This isn't rocket science but that is the point.

The Panorama control is fairly obvious to use and behaves just like any other UI control.

In most cases you are going to want to display a list with a repeating format on each of the item pages. In a standard Silverlight application the control that you would use for the job  is the ListBox. As already explained you can most certainly use the ListBox for the job. For example:

     Title="my application" 
     Name="Panorama1">
 
          Width="300" 
          Height="200" 
          Margin="0,5,0,5">
  List item 2
  List item 3
  List item 4
  List item 5
...
 
...

However if you try this out you will discover that the ListBox scrolls vertically when you drag with the mouse but it doesn't do it with the same style that the Panorama control does. If you try a flick or a swipe you will see that the list only moves for as long as the mouse does.

<ASIN:1430233060>

<ASIN:0672335395>