Windows 8 Metro | DotNet Gator

You may have noticed that in many places of the Windows 8 Metro UI, as well as many Metro applications where list content can be selected, that making a selection automatically/magically (“automagically”) brings up one or more app bars. This is consistent with the “Guidelines and checklist for app bars” published in the Metro Style Apps Dev Center:

Do place contextual commands on an app bar and show that bar programmatically.

If you have commands that are specific to the mode of the app, such as the Crop command appearing only when a photo is selected, place those commands on an app bar and show it programmatically while in that context.

If you have commands that can be performed whether content is selected or not, keep those commands on the bar if you have enough room.

Do set the app bar’s dismissal mode to sticky when displaying contextual commands.

If you have contextual commands on an app bar, set the mode to sticky while that context exists and turn off the sticky mode when the context is no longer present (such as when a photo is deselected). In sticky mode, the bar doesn’t automatically hide when the user interacts with the app. This is useful for multi-select scenarios or when the context involves interaction such as manipulating crop handles. The bar stays visible while the user performs their actions. The user can still hide the bar by swiping the top or bottom edge of the screen and they can show it again with an edge swipe.

One place where this behavior can be seen occurs when selecting and deselecting tiles in the Metro Start Screen.

Of course, this is nice and all, but sitting down to implement this (it isn’t out-of-the-box behavior) for the Metro XAML list controls (ListBox, ListView, GridView), I figured I had several options. First, I could just handle the SelectionChanged event and in the codebehind I could programmatically bring up and/or collapse the page’s app bar(s). That would do for one-off code, but its hardly the approach I would want to take for a more robust application. A second option is to bind the list’s SelectedItem(s) property to property on the page’s ViewModel, and either use a related property or a ValueConverter to bind to the AppBar’s properties. This felt a little bit much for wanting to simply alter the behavior of one control to react to the behavior another control. There are other solutions that fell into this category as well (ViewState etc.) What I ended up coming up with is a quasi-Behavior using Attached Properties that makes this (ahem) behavior reusable and quite easy to wire up.

Note: Another similar approach would be to actually use Behavior<T>. Although this component of the Blend SDK is not included with the WinRT tools, some folks have published the equivalent WinRtBehaviors project on CodePlex at http://winrtbehaviors.codeplex.com/.

As I mentioned, at the heart of this implementation are an attached property and a set of Flags indicating which app bar(s) should react to the selection change.

[Flags]
public enum AppBarDisplayFlags
{
    None = 0,
    Bottom = 1,
    Top = 2,
    BottomAndTop = 3,
}
  
public static readonly DependencyProperty AppBarDisplayOnListSelectionProperty = 
    DependencyProperty.RegisterAttached(
        "AppBarDisplayOnListSelection", 
        typeof(AppBarDisplayFlags), 
        typeof(Selector), 
        new PropertyMetadata(AppBarDisplayFlags.None, OnAppBarDisplayOnListSelectionChanged));
  
public static void SetAppBarDisplayOnListSelection(Selector element, AppBarDisplayFlags value)
{
    element.SetValue(AppBarDisplayOnListSelectionProperty, value);
}
  
public static AppBarDisplayFlags GetAppBarDisplayOnListSelection(Selector element)
{
    return (AppBarDisplayFlags)element.GetValue(AppBarDisplayOnListSelectionProperty);
}

Nothing really fancy there…just a simple attached property – I opted to indicate the owner as the Selector class instead of the containing class simply for convenience. The important part is that the attached property is defined with a callback to be used when the value of the attached property is changed – OnAppBarDisplayOnListSelectionChanged.

In the property changed handler, a check is performed to see if the code is running in the designer – if so, everything bails out. Otherwise, the selector to whom the property is being applied is obtained (if not found, bail out). The selector and the value of the flags are then passed to a helper method to handle hooking up to the pertinent events.

private static void OnAppBarDisplayOnListSelectionChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
    // Don't hook up the event listeners when running in the designer
    if (Windows.ApplicationModel.DesignMode.DesignModeEnabled) return;
  
    // Identify the selector to which this property has been applied (if none, then do nothing)
    var selector = dependencyObject as Selector;
    if (selector == null) return;
  
    var selectedFlags = (AppBarDisplayFlags)dependencyPropertyChangedEventArgs.NewValue;
    HookEvents(selector, selectedFlags);
}

In HookEvents, as long as one of the app bars is of interest, listeners are registered for the selector’s Unloaded and SelectionChanged events. Some preemptive housekeeping is also performed to first unhook the same events in order to prevent leaks. The Unloaded event merely unhooks these same events to once again prevent leaks.

The big workhorse is the HandleSelectionChanged event handler. First, the Visual Tree is traversed until an ancestor of the Selector is found that happens to be a Page – which is presumed to be the site of the app bar(s) being affected. Then the current state of the setting to show the top and/or bottom app bars is determined, and finally, if an item is selected, the appropriate app bars are shown. If no item is selected, the appropriate app bars are collapsed.

private static void HandleSelectionChanged(Object sender, SelectionChangedEventArgs e)
{
    var selector = sender as Selector;
    if (selector == null) return;
  
    // Traverse the selector's parents to find the firet "page" element
    var containingPage = selector.GetVisualAncestors().OfType<Page>().FirstOrDefault();
    if (containingPage == null) return;
  
    var currentFlags = GetAppBarDisplayOnListSelection(selector);
    var showBottomAppBar = (currentFlags & AppBarDisplayFlags.Bottom) == AppBarDisplayFlags.Bottom;
    var showTopAppBar = (currentFlags & AppBarDisplayFlags.Top) == AppBarDisplayFlags.Top;
  
    if (selector.SelectedItem != null)
    {
        // An item has been selected - show the relevant app bars
        if (showBottomAppBar) ShowAppBar(containingPage.BottomAppBar);
        if (showTopAppBar) ShowAppBar(containingPage.TopAppBar);
    }
    else
    {
        // Nothing has been selected - hide the relevant app bars
        if (showBottomAppBar) HideAppBar(containingPage.BottomAppBar);
        if (showTopAppBar) HideAppBar(containingPage.TopAppBar);
    }
}

Once the project containing this code has been compiled, the attached property is available to be set to Selector-derived UI elements.

<GridView
    x:Name="itemGridView"
    AutomationProperties.AutomationId="ItemGridView"
    AutomationProperties.Name="Grouped Items"
    Margin="116,0,40,46"
    ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
    ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
    SelectionMode="Multiple"
    local:AppBarExtensions.AppBarDisplayOnListSelection="Bottom">

Obviously, this seems like a long way to travel – the value is realized when there are multiple Selector’s scattered throughout an application where this behavior is to be applied, and/or when this code is shared across multiple applications. The entire code for the class containing the attached property follows:

public static class AppBarExtensions
{
    [Flags]
    public enum AppBarDisplayFlags
    {
        None = 0,
        Bottom = 1,
        Top = 2,
        BottomAndTop = 3,
    }
  
    public static readonly DependencyProperty AppBarDisplayOnListSelectionProperty = 
        DependencyProperty.RegisterAttached(
            "AppBarDisplayOnListSelection", 
            typeof(AppBarDisplayFlags), 
            typeof(Selector), 
            new PropertyMetadata(AppBarDisplayFlags.None, OnAppBarDisplayOnListSelectionChanged));
  
    public static void SetAppBarDisplayOnListSelection(Selector element, AppBarDisplayFlags value)
    {
        element.SetValue(AppBarDisplayOnListSelectionProperty, value);
    }
  
    public static AppBarDisplayFlags GetAppBarDisplayOnListSelection(Selector element)
    {
        return (AppBarDisplayFlags)element.GetValue(AppBarDisplayOnListSelectionProperty);
    }
  
    private static void OnAppBarDisplayOnListSelectionChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
    {
        // Don't hook up the event listeners when running in the designer
        if (Windows.ApplicationModel.DesignMode.DesignModeEnabled) return;
  
        // Identify the selector to which this property has been applied (if none, then do nothing)
        var selector = dependencyObject as Selector;
        if (selector == null) return;
  
        var selectedFlags = (AppBarDisplayFlags)dependencyPropertyChangedEventArgs.NewValue;
        HookEvents(selector, selectedFlags);
    }
  
    private static void HookEvents(Selector selector, AppBarDisplayFlags flags)
    {
        if (selector == null) throw new ArgumentNullException("selector");
  
        // Clear any "active" event handlers
        UnhookEvents(selector);
  
        if (flags != AppBarDisplayFlags.None)
        {
            selector.Unloaded += HandleUnloaded;
            selector.SelectionChanged += HandleSelectionChanged;
        }
    }
  
    private static void UnhookEvents(Selector selector)
    {
        if (selector == null) throw new ArgumentNullException("selector");
  
        selector.Unloaded -= HandleUnloaded;
        selector.SelectionChanged -= HandleSelectionChanged;
    }
  
    private static void HandleUnloaded(Object sender, RoutedEventArgs e)
    {
        UnhookEvents((Selector)sender);
    }
  
    private static void HandleSelectionChanged(Object sender, SelectionChangedEventArgs e)
    {
        var selector = sender as Selector;
        if (selector == null) return;
  
        // Traverse the selector's parents to find the firet "page" element
        var containingPage = selector.GetVisualAncestors().OfType<Page>().FirstOrDefault();
        if (containingPage == null) return;
  
        var currentFlags = GetAppBarDisplayOnListSelection(selector);
        var showBottomAppBar = (currentFlags & AppBarDisplayFlags.Bottom) == AppBarDisplayFlags.Bottom;
        var showTopAppBar = (currentFlags & AppBarDisplayFlags.Top) == AppBarDisplayFlags.Top;
  
        if (selector.SelectedItem != null)
        {
            // An item has been selected - show the relevant app bars
            if (showBottomAppBar) ShowAppBar(containingPage.BottomAppBar);
            if (showTopAppBar) ShowAppBar(containingPage.TopAppBar);
        }
        else
        {
            // Nothing has been selected - hide the relevant app bars
            if (showBottomAppBar) HideAppBar(containingPage.BottomAppBar);
            if (showTopAppBar) HideAppBar(containingPage.TopAppBar);
        }
    }
  
    private static void ShowAppBar(AppBar appBar)
    {
        if (appBar == null) return;
  
        appBar.IsSticky = true;
        appBar.IsOpen = true;
    }
  
    private static void HideAppBar(AppBar appBar)
    {
        if (appBar == null) return;
  
        appBar.IsOpen = false;
        appBar.IsSticky = false;
    }
  
    /// <summary>
    /// Gets the ancestors of the element, up to the root.
    /// </summary>
    /// <param name="node">The element to start from.</param>
    /// <returns>An enumerator of the ancestors.</returns>
    public static IEnumerable<FrameworkElement> GetVisualAncestors(this FrameworkElement node)
    {
        var parent = node.GetVisualParent();
        while (parent != null)
        {
            yield return parent;
            parent = parent.GetVisualParent();
        }
    }
  
    /// <summary>
    /// Gets the visual parent of the element.
    /// </summary>
    /// <param name="node">The element to check.</param>
    /// <returns>The visual parent.</returns>
    public static FrameworkElement GetVisualParent(this FrameworkElement node)
    {
        return VisualTreeHelper.GetParent(node) as FrameworkElement;
    }
}

DotNet Gator

.Net and Windows Development from a Florida Gator's Point of View

Category Archives: Windows 8 Metro

New in Visual Studio 2013–Windows Azure Mobile Services Integration

Metro XAML Nugget: App Bar AutoMagic