Manipulating Application Bars in Windows Phone 8.1 XAML from Code Behind

Question

This might be a trivial beginner question and I have found quite a bit of related information for Windows and Silverlight apps but nothing that would directly help me. I'm writing a Windows Phone 8.1/WinRT app in C# and XAML, and I would like to programmatically modify application bars created in XAML. For instance, there is a button I want to include in debug builds only, using preprocessor directives in code behind.

In the following XAML code I'm creating a BottomAppBar with two buttons. How can I create the second button (AppBarAddSampleItemsButton) including all properties in code behind?

<prism:VisualStateAwarePage.BottomAppBar>
    <CommandBar >
        <CommandBar.PrimaryCommands>
            <AppBarButton x:Uid="AppBarNewItemButton"
                          Label="New item"
                          Icon="Add" Command="{Binding GoToAddItemPageCommand}" />
        </CommandBar.PrimaryCommands>
        <CommandBar.SecondaryCommands>
            <AppBarButton x:Uid="AppBarAddSampleItemsButton"
                          Label="Add sample items"
                          Command="{Binding GoToAddSampleItemssPageCommand}" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</prism:VisualStateAwarePage.BottomAppBar>

Romasz · Accepted Answer · 2014-10-07T14:34:42.550

6

Here is a sample code creating an AppBarButton in the code behind and adding it to BottomAppBar of the current Page:

private void AddButtonToAppBar()
{
    AppBarButton buttonToAdd = new AppBarButton { Label = "Label", Icon = new SymbolIcon(Symbol.Help) };
    buttonToAdd.Click += async (sender, e) =>  await new MessageDialog("Button clicked").ShowAsync();
    // add button to Page's BottoAppBar
    (BottomAppBar as CommandBar).PrimaryCommands.Add(buttonToAdd);
}

Edit - as for Binding (again from the top of my head, so you will have to check this) this should probably work:

Binding myBind = new Binding();
myBind.Path = new PropertyPath("GoToAddSampleItemssPageCommand");
myBind.Source = DataContext;
buttonToAdd.SetBinding(AppBarButton.CommandProperty, myBind);

More about DataBinding at MSDN.

edited Oct 07 '14 at 14:34

answered Oct 07 '14 at 12:44

Romasz

29,662
13
79
154

Thank you. Looks good. But throws a NullReferenceException at the point where it's trying to add the button. Doesn't seem to get the handle on the command bar. – Oct 07 '14 at 13:18
@jerry It will depend when you call this method - to make this work BottomAppBar must be created before. Where do you call this method? – Romasz Oct 07 '14 at 13:21
Ouch, even I should have figured that one out. I called it before initializing the page. It works perfectly now. Tiny detail: how about the "Command" binding? – Oct 07 '14 at 13:48
@jerry I've added an edit but you will have to check it - I haven't got time to test it. – Romasz Oct 07 '14 at 14:35
Thank you, Romasz. You have helped me a lot. – Oct 07 '14 at 14:40

score 0 · Answer 2 · answered Oct 07 '14 at 12:33

0

After some digging around on the Windows Phone dev center, I found this page: How to change app bar icon buttons and menu items dynamically for Windows Phone. Hope it helps!

answered Oct 07 '14 at 12:33

Josh Fongheiser

5
5

1

Thanks, Josh. I think this applies to Silverlight apps though. – Oct 07 '14 at 13:13

Manipulating Application Bars in Windows Phone 8.1 XAML from Code Behind

2 Answers2