在App.xaml中添加不同的BottomAppBars

时间:2015-05-11 20:01:34

标签: c# xaml windows-phone-8.1

如何在App.xaml中添加不同的BottomAppBar?我需要在相同或不同的页面中动态加载不同的BottomAppBar,所以我想在App.xaml中添加它们。

例如,这里我在xaml中有2个BottomAppBars:

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>

如何在App.xaml中添加它们以便它们可以用作资源?

这是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>

2 个答案:

答案 0 :(得分:1)

只是一个想法,但是如何定义从IObservableVector继承的类:

public class CommandBarContent : IObservableVector<ICommandBarElement> {}

然后在XAML

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

添加选择器/转换器(我将其作为示例http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector

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

然后绑定命令栏:

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

我没有尝试过,但根据可能的情况数量,这可能是我会使用的解决方案。

另一种选择是绑定按钮的Visibility属性,我已经为删除按钮做了这个,但是在更改场景时按钮有“跳跃”行为,这有点奇怪。

答案 1 :(得分:0)

您可以创建一个继承自AppBar

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

    //...
}

然后你可以像这样使用它:

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

不幸的是,XAML在这种情况下无法使用。

为了能够使用XAML,您可以创建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();
        }
    }
}