Step 1 to create WPF Panorama Control

Before creating a complete Panorama Control, we have to analyze the current WP7 one. This control inherits in the following way:

public class Panorama : TemplatedItemsControl
public class TemplatedItemsControl : ItemsControl where T : global::System.Windows.FrameworkElement, new()

That is simply telling us that the Panorama will have childs of PanoramaItem. We see that in the end is a ItemsControl, so let’s start creating a SimpleItemsControl:

public class SimpleItemsControl : ItemsControl
        public SimpleItemsControl()
               new FrameworkPropertyMetadata(typeof(SimpleItemsControl)));

And as we learn before, we have to create the template in the themes/generic.xaml

<Style TargetType="{x:Type local:SimpleItemsControl}">
        <Setter Property="ItemsPanel">
                    <StackPanel Orientation="Horizontal"
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type local:SimpleItemsControl}">
                    <Border CornerRadius="5">
                        <ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">

At this moment we have a simple visualization of the items, the following steps are:

  1. Override sizes (Measure and Arrange)
  2. Three panels: background,title,items
  3. Filter to admin just PanoramaItems
  4. Add Manipulation (TranslationTransform) to both sides
  5. Add Cycle Panel
Simple Items Control
Simple Items Control

In the following post I will try to override the size in order to simplify the code, and it will be dependency properties ItemWidh and ItemHeight to be a little flexible.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s