How to add Multiple AppBar/CommandBar's in xaml page itself in windows phone 8.1 runtime app?

Question

i have implemented mvvm in my application(Prism) so every logic will comes in viewmodel so i dont want to create the appbar/commandbar from code behind, in xaml page it is not supporting more than one appbar/commandbar, i have gone through many blogs but i couldn't find any solution for my need, but i got the suggestion like by using dependency property in base page it can be done, but i have no idea how to implement it, so could any one help me regarding this. Thanks in advance :)

My code is below what i have done in code behind.(first app bar in xaml and second in code behind)

Xaml:

<storeApps:VisualStateAwarePage.BottomAppBar>
        <CommandBar x:Name="firstBar">
            <CommandBar.PrimaryCommands>

                 <AppBarButton Label="Proceed">

                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="/Assets/next.png"/>
                    </AppBarButton.Icon>

                </AppBarButton>
            </CommandBar.PrimaryCommands>
        </CommandBar>
</storeApps:VisualStateAwarePage.BottomAppBar>

CS Code:

 CommandBar secondBar;


        public HomePage()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            PrepareAppBars();

        }
        private void PrepareAppBars()
        {
            secondBar= new CommandBar();
            secondBar.IsOpen = true;

            AppBarButton btnHome = new AppBarButton() { Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Assets/home.png") } };
            btnHome.Label = "Home";

            btnHome.IsEnabled = true;

            AppBarButton btnWallet = new AppBarButton() { Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Assets/wallet.png") } };
            btnWallet.Label = "Wallet";

            btnWallet.IsEnabled = true;

            AppBarButton btnAccount = new AppBarButton() { Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Assets/account.png") } };
            btnAccount.Label = "Account";

            btnAccount.IsEnabled = true;

            AppBarButton btnUpdate = new AppBarButton() { Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Assets/update.png") } };
            btnUpdate.Label = "Update";

            btnUpdate.IsEnabled = true;

            secondBar.PrimaryCommands.Add(btnHome);
            secondBar.PrimaryCommands.Add(btnWallet);
            secondBar.PrimaryCommands.Add(btnAccount);
            secondBar.PrimaryCommands.Add(btnUpdate);    


            BottomAppBar = secondBar;
        }


 private void HomePivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            switch (HomePivot.SelectedIndex)
            {
                case 0:
                    BottomAppBar = secondBar;
                    break;
                case 1:
                    BottomAppBar = firstBar;
                    break;
                default:
                    BottomAppBar = null;
                    break;
            }
        }

Answer 1

I have the same requirement, I am going to try this solution: you can use XAML to define the buttons and ViewModel (MVVM pattern) to control the visibility of these buttons. Make the buttons in different groups. Define a property in your view model, and this property is used to show the different groups of buttons, so you need to bind that property in your XAML. Check this Multiple AppBar/CommandBars

Answer 2

You can add something like this to use Bottom Appbar, you can have up to 4 button with icon

<Page.BottomAppBar>
    <CommandBar x:Name="btmAppbar">
        <AppBarButton Icon="Refresh"
                      Label="Refresh"
                      x:Name="RefreshButton"/>
        <AppBarButton Icon="Help"
                      x:Name="HelpButton"
                      Label="Help"/>
    </CommandBar>
</Page.BottomAppBar>

To add more button you have to use secondary command

<Page.BottomAppBar>
    <CommandBar x:Name="btmAppbar">
        <AppBarButton Icon="Refresh"
                      Label="Refresh"
                      x:Name="RefreshButton"/>
        <AppBarButton Icon="Help"
                      x:Name="HelpButton"
                      Label="Help"/>
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="FirstSecondary"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Hope this could help.