extending the windows phone pivot

As I was working on a Windows Phone 8 project I needed a pivot that could hide its title, giving back some screen real-estate when needed. The basic pivot that is included in the Windows Phone SDK doesn’t have this kind of behavior so it was a great opportunity to try out custom controls in Windows Phone. I’ve build custom controls in XAML before but never based on an existing one, so fun times ahead. Let me start by showing a side-by-side comparison between both views of my pivot.

don’t mind the overlapping textblock and button, point is that when the button is clicked, the title of the pivot disappears.

Building a XAML custom control

It’s quite easy to build a custom control in XAML as long as you follow the guidelines. It requires you to add a folder called Themes and in the folder a file called generic.xaml. The generic.xaml file is a resource dictionary, no code behind file is needed. Do follow the naming conventions exactly or your control won’t work. Next step is adding a class that inherits from ContentControl (or a control that already inherits from ContentControl). The project for my ExtendedPivot looks like this

The project type is a WP8 class library containing two custom controls, one for the pivot and one for the pivot items.

Extending the pivot

Since I only want to add a functionality to an existing control, the Pivot, my ExtendedPivot class inherits from Pivot instead of CustomControl.

Code Snippet
publicclassExtendedPivot : Pivot
{
    publicstaticreadonlyDependencyProperty HeaderVisibilityProperty =
        DependencyProperty.Register("HeaderVisibilityProperty", typeof (Visibility), typeof (ExtendedPivot), newPropertyMetadata(null));
 
    publicVisibility HeaderVisibility
    {
        get { return (Visibility)GetValue(HeaderVisibilityProperty); }
        set { SetValue(HeaderVisibilityProperty, value); }
    }
 
    public ExtendedPivot()
    {
        DefaultStyleKey =  typeof(ExtendedPivot);
    }
}

We’ll start with the constructor, Line 14 is necessary when developing a custom control, it sets the style of the control to the style defined in generic.xaml (we’ll get to that style in a minute). Lines 6 – 10 are a property that will be used by the DependencyProperty. The DependencyProperty (lines 3-4) is a property that we can bind a value to when using the control in a project, it might seem a bit overwhelming at first but there’s a great snippet in VS2012 to easily write them. Basically, the parameters for the Register function are a name, the type of the property, the owner type (type of the control where you’re declaring the DP) and some metadata.

The get and set method of the normal property use the DP to get and set values through databinding.

generic.xaml

This is the style for the ExtendedPivot as declared in generic.xaml

Code Snippet
<Style TargetType="local:ExtendedPivot">
    <Setter Property="Margin" Value="0" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <Grid />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:ExtendedPivot">
                <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid Grid.RowSpan="3" Background="{TemplateBinding Background}" />
                    <ContentControl Grid.Row="0"
                                    Margin="24,17,0,-7"
                                    HorizontalAlignment="Left"
                                    Content="{TemplateBinding Title}"
                                    ContentTemplate="{TemplateBinding TitleTemplate}"
                                    Visibility="{TemplateBinding HeaderVisibility}" />
                    <primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" />
                    <ItemsPresenter x:Name="PivotItemPresenter"
                                    Grid.Row="2"
                                    Margin="{TemplateBinding Padding}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Basically, I’ve created a xaml page in some very basic Windows Phone project, right-clicked it, selected Edit Template > Edit a copy. This gives you a copy of the template for the Pivot. I copied that template in the generic.xaml style. The ContentControl at Lines 23-28 show the title in the pivot. I added the Visiblity property here and bound it to the HeaderVisibility property in the ExtendedPivot class. To bind a property in a style you need to use the TemplateBinding keyword instead of the normal Binding one.

Don’t forget to set TargetType to the type of your custom control.

Using the custom control in an app

The control is ready, now it’s time to use it. Create a new Windows Phone app and reference the project or DLL of the custom control. This is the MainPage of the sample app.

Code Snippet
<phone:PhoneApplicationPage x:Class="ExtendedPivot.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:control="clr-namespace:ExtendedPivot.Control;assembly=ExtendedPivot.Control"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            SupportedOrientations="Portrait"
                            shell:SystemTray.IsVisible="True"
                            mc:Ignorable="d">
 
    <!--  LayoutRoot is the root grid where all page content is placed  -->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--  Pivot Control  -->
        <control:ExtendedPivot HeaderVisibility="{Binding Visibility}" Title="MY APPLICATION">
            <control:ExtendedPivotItem Header="item 1">
                <Grid>
                    <TextBlock Text="item1" />
                    <Button Click="ButtonBase_OnClick" Content="button" />
                </Grid>
            </control:ExtendedPivotItem>
 
            <control:ExtendedPivotItem Header="item 2">
                <TextBlock Text="item2" />
            </control:ExtendedPivotItem>
        </control:ExtendedPivot>
    </Grid>
</phone:PhoneApplicationPage>

Line 4 defines the namespace that holds the ExtendedPivot. Line 20 puts the control on the actual page. Notice that we bind the HeaderVisibility property of our control. I defined the datacontext of this page in code behind to be of type MainViewModel. MainViewModel implements INotifyPropertyChanged and only holds one property of type Visibility, that property is bound to the ExtendedPivot’s HeaderVisibility.

The Button in the pivot will switch the HeaderVisibility between Collapsed and Visible, this happens in the code behind of this page.

Code Snippet
publicpartialclassMainPage : PhoneApplicationPage
{
    privateMainViewModel _mainViewModel;
 
    // Constructor
    public MainPage()
    {
        InitializeComponent();
 
        _mainViewModel = newMainViewModel();
 
        DataContext = _mainViewModel;
    }
 
    privatevoid ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        if (_mainViewModel.Visibility == Visibility.Collapsed)
        {
            _mainViewModel.Visibility = Visibility.Visible;            
        }
        else
        {
            _mainViewModel.Visibility = Visibility.Collapsed;          
        }
    }
}

Not really the best way of writing a Windows Phone app but it’s just for making the point Glimlach

Conclusion

Extending a Windows Phone control isn’t hard as long as you follow the naming conventions, adding some extra functionality is as easy as copying the xaml template and adding some dependency properties.

The sample code can be found on my SkyDrive

Share on

Twitter Facebook Google+ LinkedIn

Nico Vermeir