3

Back in Windows Phone 8, I was able to to use multiple AppBar, swapping them on certain pivot pages but In Windows Phone 8.1, I'm not sure how to do this or is this even possible.

Basically for my scenario, I've got 3 Pivot Pages. Each page needs to have a different CommandBar because it needs to have different controls.

Is someone able to show me how I can do this?

Edit: Code Which I used for Windows Phone 8 to execute this:

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

Basically switches the the AppBar when the PivotPage is changed.

4

3 回答 3

14

一个简单的解决方案是使用 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）并且每个视图都有其不同的命令按钮组的情况下可能非常有用。

于 2014-11-05T16:25:20.497 回答
13

在 WP8.1 RT 中，您有一个Page 的 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;
    }
}
于 2014-04-20T09:10:52.217 回答
1

最后，我创建了扩展原始页面的基页面类（实际上我已经将导航参数传递给 ViewModel）。在基本页面中，我添加了依赖属性 AppBarCollection，以便我可以在 Xaml 中的真实页面中使用它。我在那里定义了所有必要的 AppBar，而无需在后面的代码中创建它们。我在那里做的唯一一件事就是选择展示哪一个。即使这也可以从 Xaml 完成，但我不想让事情变得更复杂。该选项基本上是第一个建议，不同之处在于您可以在 xaml 中定义页面中的所有 AppBar。

<views:BindablePage.AppBarCollection>
    <views:AppBarCollection>
        <CommandBar/>
        <CommandBar/>
        <CommandBar/>
    </views:AppBarCollection>
</views:BindablePage.AppBarCollection>
于 2014-12-26T10:24:51.373 回答