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()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(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">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"
                     VerticalAlignment="Center"
                     HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:SimpleItemsControl}">
                    <Border CornerRadius="5">
                        <ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s