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. If you are using MVVM pattern, you can bind your command to MenuCommand property.
StoreAppLib.Controls
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;
}
If you are using MVVM pattern, you can bind your command to "MenuCommand" of the AppBarButton. When the menu is clicked, the command will receive the selected menu as command argument. You can cast this argument to IMenuItem and decide which menu is selected. MenuCommand will be fired after the MenuItemInvoked event.