Windows 8 XAML Tips - Show a task pane

You can integrate the look and feel introduced in Windows 8 Release Preview into your Metro style app by using the Animation Library suite of Windows-provided animations. Use of the Animation Library animations provides these benefits:

• Motions that align to Metro style animation principles
• Fast, fluid transitions between UI states that inform but do not distract the user
• Clearer visuals to show the user transitions within an app

One of the animations that are supplied in the Animation Library is the show hide panel animation. You use it to show and hide a panel, which is large edge-based UI such as a custom keyboard or a task pane. This 'Windows Animation (Metro styled apps)' article shows you how you can use the PaneThemeTransition animation class in XAML. The article also contains the video below in which the animation is shown. Sadly there is no code sample how to use it in your XAML/C# application. With this blog I want to fill in the gap. I will explain you how you get the animation as shown in the video.

Show a task pane video

If you play this video you will see a task plane appear from the right side of the screen.

My Solution

In my solution I have a page with only one button. If you click this button a red Rectangle will appear from the right side of the screen. You can off course replace this Rectangle with your own User Control.

I use a Popup control to show my red Rectangle with a with of 300 pixels. The Child property of the Popup is set to the Rectangle. The Popup has a ChildTransitions which is filled with a PaneThemeTransition animation object. The PaneThemeTransition object has a Edge property set to the Right. The left position of the Popup is calculated using the actual width of the page minus the width of the rectangle. This position and the height of the Rectangle are set every time the pane is shown because it can differ due to view changes (filled, landscape, portrait).

public sealed partial class MainPage : Page {

    private Popup _popup;

    public MainPage() {
        this.InitializeComponent();
    }

    private void ButtonShow_Click(object sender, RoutedEventArgs e) {
        ShowTaskPane();
    }

    /// <summary>
    /// Show and hide a task pane or other large UI container from the edge of the screen.
    /// http://msdn.microsoft.com/en-US/library/windows/apps/hh975420
    /// </summary>
    private void ShowTaskPane() {
        const int width = 300;

        if (_popup == null) {

            var rect = new Rectangle {
                Fill = new SolidColorBrush(Colors.Red),
                Width = width,
            };

            _popup = new Popup {
                IsLightDismissEnabled = true,
                ChildTransitions = new TransitionCollection(),
                Child = rect,
            };

            _popup.ChildTransitions.Add(new PaneThemeTransition 
                                        { Edge = EdgeTransitionLocation.Right });
        }

        (_popup.Child as FrameworkElement).Height = this.ActualHeight;
        _popup.SetValue(Canvas.LeftProperty, this.ActualWidth - width);
        _popup.IsOpen = true;
    }
}

Closure

I hope you like my solution. I my next blog I will try to create a more generic one. I will then use it to show task panes from the Settings charm.

Cheers,

Fons

All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.