WPF PanoramaItem

After creating in brute force mode the WPF Panorama I am creating the bindable,with properties and polished WPF Panorama, First I created the base of the PanoramaItem.

To do that you have to use the ResourcesDictionary of WP7, Blend to extract the template, and a little of knowledge about dependency properties, after that and with the help of the constructor of Mosers’, here it is the PanoramaItem.cs:

// Summary:
    //     Represents an item in a Panorama control.
    public class PanoramaItem : ContentControl
        // Summary:
        //     Identifies the Header dependency property.
        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
           "Header", typeof(object), typeof(PanoramaItem), new PropertyMetadata(null));

        // Summary:
        //     Identifies the HeaderTemplate dependency property.
        public static readonly DependencyProperty HeaderTemplateProperty = DependencyProperty.Register(
           "HeaderTemplate", typeof(DataTemplate), typeof(PanoramaItem), new PropertyMetadata(null));

        // Summary:
        //     Identifies the Orientation dependency property.
        public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
           "Orientation", typeof(Orientation), typeof(PanoramaItem), new PropertyMetadata(Orientation.Horizontal));

        static PanoramaItem()
                new FrameworkPropertyMetadata(typeof(PanoramaItem)));

        // Summary:
        //     Gets or sets the header for the PanoramaItem.
        // Returns:
        //     Returns System.Object .
        public object Header
            get { return (object)this.GetValue(HeaderProperty); }
                this.SetValue(HeaderProperty, value);

        // Summary:
        //     Gets or sets the template for the Header property.
        // Returns:
        //     Returns System.Windows.DataTemplate .
        public DataTemplate HeaderTemplate
            get { return (DataTemplate)this.GetValue(HeaderTemplateProperty); }
                this.SetValue(HeaderTemplateProperty, value);

        // Summary:
        //     Gets or sets the primary (scrolling) orientation for the PanoramaItem.
        // Returns:
        //     Returns System.Windows.Controls.Orientation .
        public Orientation Orientation
            get { return (Orientation)this.GetValue(OrientationProperty); }
                this.SetValue(OrientationProperty, value);

Now, after fighting with the XAML and being impossible to add the template inside a usercontrol, adding the static constructor of above you have to add a generic.xaml in themes, as Mosers’ said:


    <!-- Font names -->
    <FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily>
    <FontFamily x:Key="PhoneFontFamilyLight">Segoe WP Light</FontFamily>
    <FontFamily x:Key="PhoneFontFamilySemiLight">Segoe WP SemiLight</FontFamily>
    <FontFamily x:Key="PhoneFontFamilySemiBold">Segoe WP Semibold</FontFamily>

    <!-- Font sizes -->

    <System:Double x:Key="PhoneFontSizeSmall">18.667</System:Double>
    <System:Double x:Key="PhoneFontSizeNormal">20</System:Double>
    <System:Double x:Key="PhoneFontSizeMedium">22.667</System:Double>
    <System:Double x:Key="PhoneFontSizeMediumLarge">25.333</System:Double>
    <System:Double x:Key="PhoneFontSizeLarge">32</System:Double>
    <System:Double x:Key="PhoneFontSizeExtraLarge">42.667</System:Double>
    <System:Double x:Key="PhoneFontSizeExtraExtraLarge">54</System:Double>
    <System:Double x:Key="PhoneFontSizeHuge">186.667</System:Double>

    <Style TargetType="{x:Type local:PanoramaItem}">
        <Setter Property="CacheMode" Value="BitmapCache"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type local:PanoramaItem}">
                    <Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="*"/>
                        <ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="10,-2,0,26">
                                <TranslateTransform x:Name="headerTransform"/>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>


At this moment you have a custom contentcontrol, now I have to polish my Panorama Control, I have added the sliding, but I want to make the header that dissapears bindable with the translation and appears the new one. This is a early preview:

Windows 8 WPF
WPF Windows 8









Work in progress…


3 thoughts on “WPF PanoramaItem

    1. Thank you a lot for the comment, you are the first 🙂
      At this moment I have finished the Panorama Control for WPF using Metro UI, I have cleaned the code many properties are binded and I am creating the button styles and states and else. But beforeI have to publish an application that I am polishing for WP7.

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 )

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