CODEWITHSUNDEEP
c#xamlwindows-phone-8.1
Rui Huang
Rui Huang

Reputation: 382

Add different BottomAppBars in App.xaml

How to add different BottomAppBar in App.xaml? I need to dynamically load different BottomAppBar in the same or different pages, so i want to add them in App.xaml.

For instance, here I have 2 BottomAppBars in xaml:

PageBottomAppBar1

<Page.BottomAppBar>
    <CommandBar Name="PageBottomAppBar1">
        <CommandBar.PrimaryCommands>
            <AppBarButton Label="new" 
                          Icon="Page" 
                          Command="{Binding AddCommand, Mode=OneWay}"/>
            <AppBarButton Label="search" 
                          Icon="Find" />
        </CommandBar.PrimaryCommands>

        <CommandBar.SecondaryCommands>
            <AppBarButton Name="Logout" 
                          Label="Logout" 
                          Command="{Binding LogoutCommand, Mode=OneWay}" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

PageBottomAppBar2

<Page.BottomAppBar>
    <CommandBar Name="PageBottomAppBar2">
        <CommandBar.PrimaryCommands>
            <AppBarButton Label="sync" 
                          Icon="Sync" 
                          Command="{Binding SyncCommand, Mode=OneWay}"/>
            <AppBarButton Label="search" 
                          Icon="Find" />
        </CommandBar.PrimaryCommands>

        <CommandBar.SecondaryCommands>
            <AppBarButton Name="About" 
                          Label="About" 
                          Command="{Binding AboutCommand, Mode=OneWay}" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

How can I add them in the App.xaml so that they can be used as resource?

Here is the App.xaml:

<Application x:Class="Test.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Test">
<Application.Resources>
  <vm:ViewModelLocator x:Key="Locator" xmlns:vm="using:Test.ViewModel" />

</Application.Resources>
</Application>

Upvotes: 2

Views: 303

Answers (2)

Jean
Jean

Reputation: 5101

Just a thought, but what about defining a class inherited from IObservableVector:

public class CommandBarContent : IObservableVector<ICommandBarElement> {}

then in XAML

<cb:CommandBarContent x:Key="FirstPrimaryBar">
    <AppBarButton Label="new" 
                      Icon="Page" 
                      Command="{Binding AddCommand, Mode=OneWay}"/>
    <AppBarButton Label="search" 
                      Icon="Find" />
</cb:CommandBarContent>

Add a selector/converter (I would take that as example http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector )

<cb:MyCommandSelector x:Key="CommandSelector" Case1="{StaticResource FirstPrimaryBar}" Case2="{StaticResource SecondPrimaryBar}" />

Then bind the commandbar:

<CommandBar Name="PageBottomAppBar1" PrimaryCommands="{Binding ScenarioParameter,Converter={StaticResource CommandSelector}}">

I haven't tried it, but depending on the number of possible scenarios, that may be a solution I would use.

Another option is to bind the Visibility property of the buttons, I have done that for a delete button, but the button has a "jumping" behaviour when changing the scenario, which is kind of weird.

Upvotes: 1

Wojciech Kulik
Wojciech Kulik

Reputation: 8440

You could create a class which inherits from AppBar:

public class MyAppBar : AppBar
{
    public MyAppBar() 
    { 
    }

    //...
}

Then you could use it like this:

<Page.BottomAppBar>
    <local:MyAppBar />
</Page.BottomAppBar>

Unfortunately XAML won't be available in this case.

To be able to use XAML you can create a UserControl

MyCustomAppBar.xaml:

<ctrls:AppBar
    x:Class="App1.MyCustomAppBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ctrls="using:Windows.UI.Xaml.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid>

    </Grid>
</ctrls:AppBar>

MyCustomAppBar.xaml.cs:

using Windows.UI.Xaml.Controls;

namespace App1
{
    public sealed partial class MyCustomAppBar : AppBar
    {
        public MyCustomAppBar()
        {
            this.InitializeComponent();
        }
    }
}

Upvotes: 0

Related Questions