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()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(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); }
            set
            {
                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); }
            set
            {
                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); }
            set
            {
                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:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WP8Controls"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    >

    <!-- 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 -->

    <!--14pt-->
    <System:Double x:Key="PhoneFontSizeSmall">18.667</System:Double>
    <!--15pt-->
    <System:Double x:Key="PhoneFontSizeNormal">20</System:Double>
    <!--17pt-->
    <System:Double x:Key="PhoneFontSizeMedium">22.667</System:Double>
    <!--19pt-->
    <System:Double x:Key="PhoneFontSizeMediumLarge">25.333</System:Double>
    <!--24pt-->
    <System:Double x:Key="PhoneFontSizeLarge">32</System:Double>
    <!--32pt-->
    <System:Double x:Key="PhoneFontSizeExtraLarge">42.667</System:Double>
    <!--54pt-->
    <System:Double x:Key="PhoneFontSizeExtraExtraLarge">54</System:Double>
    <!--140pt-->
    <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">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:PanoramaItem}">
                    <Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="10,-2,0,26">
                            <ContentControl.RenderTransform>
                                <TranslateTransform x:Name="headerTransform"/>
                            </ContentControl.RenderTransform>
                        </ContentControl>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

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:

WPF Windows 8

 

 

 

 

 

 

 

 

Work in progress…

• Uncategorized