Page Header with Global Navigation Menu

PageHeaderTextBlock control page header control that helps developers to add a page header with built-in global navigation menu. Menu should be defined in App.xaml.cs file. Page header will have a right arrow which can be customized for individual pages. Pages can subscribe to global navigation menu item invoke event to pass navigation parameter to “Navigating To Page” or to cancel the navigation based on the state of the page.

Page header with global navigation menu

Namespace

StoreAppLib.Controls

Using PageHeaderTextBlock

To use the control in your project, add reference to the StoreAppLib project  or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.

You can define global navigation menu in the constructor of the App class in App.xaml.cs file. First add StoreAppLib.Controls namespace reference to the file and then define menu by specifying a label and type of the Navigate To page. Use GlobalNavigationMenuItem to add menu items and MenuSeparator to add menu separator.

 Following example adds a menu item.

   PageHeaderTextBlock.AddMenu(
      
new GlobalNavigationMenuItem()
       {
          Label =
"DatePicker",
         
Page = typeof
(DatePickerPage)
       });

Following code customise the menu.

PageHeaderTextBlock.MenuPointerOverBackground = new SolidColorBrush(Color .FromArgb(255,175,67,67));
PageHeaderTextBlock.MenuPressedBackground = new SolidColorBrush(Color.FromArgb(255, 169, 0, 0));
PageHeaderTextBlock.MenuSeparatorColor = new SolidColorBrush(Color.FromArgb(255, 255, 65, 65));
PageHeaderTextBlock.MenuSeparatorThickness = 2;
PageHeaderTextBlock.MenuBackground = new SolidColorBrush(Color.FromArgb(255, 170, 56, 56));
PageHeaderTextBlock.MenuForeground = new SolidColorBrush(Colors.White);
PageHeaderTextBlock.MenuBorderColor = new SolidColorBrush(Color.FromArgb(255, 255, 65, 65));
PageHeaderTextBlock.MenuBorderThickness = 2;

To add page heading to a page, add the following namespace reference to the page.

<Page xmlns:storeAppControl="using:StoreAppLib.Controls" ...

Following code add page header.

<storeAppControl:PageHeaderTextBlock
         Text
="Page Header"
         GlobalNavigationInvoked="OnGlobalNavigationInvoked" />

Use Arrow and ArrowSize property when you want to use another character as arrow. Use Content property to apply a template as arrow.

If you change the default style for the Heading and the Arrow, use the RenderTransform and ArrowRenderTransform to vertically align them.

Use the GlobalNavigationInvoked event to pass navigation parameter or to cancel the global navigation from the page.

The event signature is given below.

private void OnGlobalNavigationInvoked(GlobalNavigationMenuItem source, GlobalNavigationEventArgs args)

     //// args.Cancel = [true if you want to cancel navigation]
     //// args.NavigationParamenter = [parameter to be passed to navigating to page]
     //// args.Frame = [the frame object. By default this page frame]
}

The “source” parameter represents the menu item. If you don’t want to navigate away from the page based on the current state of the page, set args.Cancel = true.

If you select the global navigation menu item for the current page, args.Cancel value will be true by default and navigation will not occur. If you want to reload the page you can set args.Cancel to false.

Attach the parameter you want pass to the “Navigate To” page to args.NavigationParameter. The parameter can be accessed in the Paramenter property of the NaviagationEventArgs object in OnNavigatTo method in the “Navigate To” page.

Last edited Nov 27, 2012 at 4:51 PM by sureshkumart, version 3

Comments

No comments yet.