多个AppBar/CommandBar

Question

回到Windows Phone 8,我能够使用多个AppBar,在某些数据透视页上交换它们,但在Windows Phone 8.1中,我不知道如何做到这一点,或者这是否可能.

基本上对于我的场景,我有3个Pivot页面.每个页面都需要具有不同的CommandBar,因为它需要具有不同的控件.

有人能告诉我如何做到这一点吗？

编辑: 代码我用于Windows Phone 8执行此操作:

XAML:

<phone:PhoneApplicationPage.Resources>
<shell:ApplicationBar x:Key="AppBar1" IsVisible="True" IsMenuEnabled="True">
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
    <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
    </shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>

<shell:ApplicationBar x:Key="AppBar2" IsVisible="True" IsMenuEnabled="True">
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" />
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2" />
    <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem Text="MenuItem 1" />
        <shell:ApplicationBarMenuItem Text="MenuItem 2" />
    </shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>

C#:

private void MainPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        switch (MainPivot.SelectedIndex)
        {
            case 0:
                ApplicationBar = this.Resources["AppBar1"] as ApplicationBar;
                break;
            case 1:
                ApplicationBar = this.Resources["AppBar2"] as ApplicationBar;
                break;
        }
    }

更改数据透视表时,基本上会切换AppBar.

Answer 1

一个简单的解决方案是使用XAML定义按钮和ViewModel(MVVM模式)来控制这些按钮的可见性,这可以避免在代码中创建按钮和复杂的逻辑来控制显示哪个按钮.

首先,定义CommandBar中可能使用的所有按钮:

<Page.BottomAppBar>
    <CommandBar>
        <!--buttons of group1-->
        <AppBarButton Icon="Icon1" Label="button1"/>
        ...
        <!--buttons of group2-->
        <AppBarButton Icon="Icon2" Label="button2"/>
        ...
        <!--buttons of group3-->
        <AppBarButton Icon="Icon3" Label="button3"/>
    </CommandBar>
</Page.BottomAppBar>

然后在ViewModel中定义一个属性,例如:

public class PageViewModel : INotifyPropertyChanged
{
    ...
    public int CommandGroup
    {
        get { return _commandGroup; }
        set { _commandGroup = value; NotifyPropertyChanged("CommandGroup"); }
    }
}

此CommandGroup属性用于控制按钮的显示/隐藏,例如,设置CommandGroup = 1以显示group1中的按钮和隐藏其他组中的按钮,设置CommandGroup = 2以显示group2中的按钮和隐藏其他组中的按钮,这里的group1和group2只是逻辑组.

然后定义一个转换器,将CommandGroup属性的值转换为Visibility:

public class CommandGroupToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language) 
    {
        return (System.Convert.ToInt32(value) == System.Convert.ToInt32(parameter)) ? Visibility.Visible : Visibility.Collapsed;
    }
}

最后,将此CommandGroup属性绑定到CommandBar中的所有按钮(复制和粘贴内容):

<Page.Resources>
    <c:CommandGroupToVisibilityConverter x:Key="MyConverter"/>
</Page.Resources>
<Page.BottomAppBar>
    <CommandBar>
        <!--buttons of group1-->
        <AppBarButton 
            Icon="Icon1" Label="button1" 
            Visibility="{Binding CommandGroup, Converter={StaticResource MyConverter}, ConverterParameter=1}"/>

        <!--buttons of group2-->
        <AppBarButton 
            Icon="Icon2" Label="button2" 
            Visibility="{Binding CommandGroup, Converter={StaticResource MyConverter}, ConverterParameter=2}"/>

        <!--buttons of group3-->
        <AppBarButton 
            Icon="Icon3" Label="button3" 
            Visibility="{Binding CommandGroup, Converter={StaticResource MyConverter}, ConverterParameter=3}"/>
    </CommandBar>
</Page.BottomAppBar>

请注意,当CommandGroup == 2时,将显示所有具有ConverterParameter = 2的按钮,其他按钮将消失.

在一个页面中有多个视图(如Pivot)并且每个视图都有不同的命令按钮组时,这可能非常有用.

Answer 2

在WP8.1 RT中,您有一个页面属性BottomAppBar.它与旧的ApplicationBar几乎相同(除了扩展) - 您可以使用CommandBar进行设置.我已经在代码中创建了我的命令栏并且它可以工作,你可以尝试这样:

// prepare your CommandBars - run method somewhere in the constructor of the page:
CommandBar firstBar;
CommandBar secondBar;

private void PrepareAppBars()
{
    firstBar = new CommandBar();
    firstBar.IsOpen = true;
    AppBarButton FirstBtn = new AppBarButton() { Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Assets/first.png") } };
    FirstBtn.Label = "First";
    FirstBtn.Click += FirstBtn_Click;
    FirstBtn.IsEnabled = true;
    // Similar for second button
    AppBarButton SecondBtn = new AppBarButton() { Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Assets/second.png") } };

    firstBar.PrimaryCommands.Add(FirstBtn);
    firstBar.PrimaryCommands.Add(SecondBtn);

    // define also SecondaryCommands

    // simlar secondBar
    secondBar = new CommandBar();
    secondBar.IsOpen = true;
    // ...
}

// then you can surely switch them like this:

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