How To Create A Bottom Or Top AppBar in Windows Store App Using C#?

Question

I'm aware of the way to create the AppBar via XAML code. I want to know how to create the AppBar via C#.

On the Windows Phone App, i can just do this.

ApplicationBar = new ApplicationBar(){
            Mode = ApplicationBarMode.Minimized
};

ApplicationBarMenuItem copyLinkButton = new ApplicationBarMenuItem();
copyLinkButton.Click += (sender, e) => { //action };
copyLinkButton.Text = "copy to clipboard";
ApplicationBar.MenuItems.Add(copyLinkButton);

ApplicationBarMenuItem openInIEButton = new ApplicationBarMenuItem();
openInIEButton.Click += (sender, e) => { //action };
openInIEButton.Text = "open in internet explorer";
ApplicationBar.MenuItems.Add(openInIEButton);

How do i do it in Windows Store App?

Update

Thank you @kimsk for giving me an answer to my previous question. I've solved it with your answer. But after solving that problem, another similar problem surfaced.

Because i didn't simply use a button like this,

<Button>Button 3</Button>

I have problem tapping into the Microsoft's default style. Is there anyway to reference to that particular style or do i have to create one from scratch by myself?

<Button Style="{StaticResource EditAppBarButtonStyle}"/>

Thanks again!

Answer 1

It's pretty straightforward if you think about XAML is just a declarative way to create objects of UIElement elements such as AppBar, Button, StackPanel, and so on.

Here is the code to create a BottomAppBar in XAML that you already know:

<Page.BottomAppBar>
    <AppBar>
        <StackPanel Orientation="Horizontal">
            <Button>Button 3</Button>
            <Button>Button 4</Button>
        </StackPanel>
    </AppBar>
</Page.BottomAppBar>

Here is the C# code that creates a TopAppBar:

var appBar = new AppBar();
var stackPanel = new StackPanel{Orientation = Orientation.Horizontal};

stackPanel.Children.Add(new Button { Content = "Button1" });
stackPanel.Children.Add(new Button { Content = "Button2" });

var buttonWithStyle = new Button();
buttonWithStyle.Style = Application.Current.Resources["EditAppBarButtonStyle"] as Style;
stackPanel.Children.Add(buttonWithStyle);

appBar.Content = stackPanel;

this.TopAppBar = appBar;

Notice the pattern? :-)

And this is the screenshot:

Hope this helps!