Nambukarthy Raveendran
Nambukarthy Raveendran

Reputation: 116

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

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;
            }
        }

Upvotes: 0

Views: 1772

Answers (2)

Rui Huang
Rui Huang

Reputation: 382

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

Upvotes: 0

Ganesh Cauda
Ganesh Cauda

Reputation: 1016

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.

Upvotes: -1

Related Questions