AppBar Button

AppBarButton control is a button that displays a popup menu when tap on it. You can place this button in app bar and apply any style to manage its presentation. Popup menu can be defined in the XAML file. Menu item invoke is notified through MenuItemInvoked event.

AppBar Button with Menu

Namespace

StoreAppLib.Controls

Using AppBar Button

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

To add the control in a page, add the following namespace reference to the page.

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

Menu item is created using MenuItem and separator is created using MenuSeparator. Menu item has two properties – Label and Id. You can customize the menu at Menu level or individual Menu item level.  The following code shows a sample AppBar button with a popup menu.

<Page.BottomAppBar>
  
<AppBar  IsSticky = "False">
     
<StackPanel HorizontalAlignment = "Right">

         <storeAppControl:AppBarButton Caption = "Custom Menu"       
                         
Style = "{StaticResource SortAppBarButtonStyle}" 
                          MenuItemInvoked = "OnAppBarMenuItemInvoked"> 

                <storeAppControl:AppBarButton.Menu>
                    <storeAppControl:Menu
                             PointerOverBackground
= "#FFAF4343"
                             PressedBackground = "#FFA90000" 
                             Background = "#FFAA3838"
                             BorderThickness = "4"
                             BorderBrush = "#FFFF4141"
                             Foreground = "White"
                             SeparatorThickness = "3"
                             SeparatorColor = "#FFFF4141">

                         <storeAppControl:Menu.Items>
                             <storeAppControl:MenuItem Label
= "Date Picker"/>
                             <
storeAppControl:MenuItem Label = "Page Header"/>
                             <
storeAppControl:MenuItem Label = "App Bar Button"/>
                             <
storeAppControl:MenuSeparator />
                             <
storeAppControl:MenuItem Label = "Tap Effect"/>
                             <
storeAppControl:MenuSeparator />
                             <
storeAppControl:MenuItem Label ="Date time converter" />
                             <
storeAppControl:MenuItem Label ="Count Converter"/>
                             <
storeAppControl:MenuItem Label ="Concatenation Converter"/>
                             </
storeAppControl:Menu.Items >
                         </
storeAppControl:Menu >

                    </
storeAppControl:AppBarButton.Menu >
                </
storeAppControl:AppBarButton >

         </StackPanel>
     
</AppBar>
 
</Page.BottomAppBar>

The event signature is given below.

The “source” parameter represents the AppBarButton and the "menuItem" represent the menu selected. You can access the Id and Label defined in the XAML using the menuItem object.

   private void OnAppBarMenuItemInvoked(
      
object source,
      
StoreAppLib.Controls.
IMenuItem menuItem)
  
{
      
AppBarButton button = source as AppBarButton;
      
object id = menuItem.Id;
      
string label = menuItem.Label;
  
}

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

Comments

No comments yet.