65.9K
CodeProject 正在变化。 阅读更多。
Home

将命令附加到 WP7 应用程序栏

mbcrump
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.46/5 (8投票s)

2011年2月22日

CPOL

2分钟阅读

viewsIcon

39945

downloadIcon

387

本文档描述了如何将命令绑定到 Windows Phone 7 应用程序栏。

引言

我在人们创建 WP7 应用程序时遇到的一个最大问题是如何将应用程序栏绑定到 RelayCommand。 如果您正在使用 MVVM，那么这一点尤其重要。 让我们检查一下可以添加到开始的代码。

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="appbar_button1" 
	IconUri="/icons/appbar.questionmark.rest.png" Text="About">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <GalaSoft_MvvmLight_Command:
		EventToCommand Command="{Binding DisplayAbout, Mode=OneWay}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
 
        </shell:ApplicationBarIconButton>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem x:Name="menuItem1" 
		Text="MenuItem 1"></shell:ApplicationBarMenuItem>
            <shell:ApplicationBarMenuItem x:Name="menuItem2" 
		Text="MenuItem 2"></shell:ApplicationBarMenuItem>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

这行不通，杰克

一切看起来都正确。 但我们很快注意到我们的 Interaction.Triggers 下方有一条波浪线。 问题在于该对象不是 FrameworkObject。 如果这是一个普通的按钮，那么这段代码本来可以完美运行。

errorscreen.png

好的。 观点已经证明。

让 ApplicationBar 支持命令

所以，使用 MVVM Light 创建一个新项目。 如果您想查看源代码并配合本教程进行操作，请点击 这里。

使用 MVVM Light 在应用程序栏上进行绑定的 7 个简单步骤（我补充一点，您不必使用 MVVM Light 才能获得此功能，我只是更喜欢它。）

mvvmlightlogo.png

步骤 1

如果您还没有 MVVM Light，请下载并安装项目模板。 它可以在 http://mvvmlight.codeplex.com/ 上找到。

第二步

点击文件 - 新建项目，然后导航到 Silverlight for Windows Phone。 确保使用 MVVM Light 模板，简要描述如何使用本文档或代码。 类名、方法和属性、任何技巧或提示。

mvvmnewproject.png

步骤 3

现在我们已经设置好项目并准备好了，让我们下载 Nicolas Humann 创建的包装器 这里，它被称为 Phone7.Fx。 下载后，将其提取到您可以找到的位置。 此包装器将使我们的应用程序栏/菜单项可绑定。

步骤 4

右键单击 WP7 项目中的引用，并将 DLL 文件添加到您的项目中。

addreferences.png

previewaddreference.png

步骤 5

在您的 MainPage.xaml 中，您需要添加适当的 namespace 。 之后不要忘记构建您的项目。

xmlns:Preview="clr-namespace:Phone7.Fx.Preview;assembly=Phone7.Fx.Preview"

步骤 6

现在您可以将 BindableAppBar 添加到您的 MainPage.xaml 中，只需几行代码即可。

<Preview:BindableApplicationBar x:Name="AppBar" BarOpacity="1.0"  >
    <Preview:BindableApplicationBarIconButton Command="{Binding DisplayAbout}" 
	IconUri="/icons/appbar.questionmark.rest.png" Text="About" />
    <Preview:BindableApplicationBar.MenuItems>
        <Preview:BindableApplicationBarMenuItem  Text="Settings" 
		Command="{Binding InputBox}" />
    </Preview:BindableApplicationBar.MenuItems>
</Preview:BindableApplicationBar>

所以您的最终 MainPage.xaml 将类似于这样：  

注意： 使用此包装器，AppBar 将位于 Grid 内部。

<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
 
    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="24,24,0,12">
        <TextBlock x:Name="ApplicationTitle"
                   Text="{Binding ApplicationTitle}"
                   Style="{StaticResource PhoneTextNormalStyle}" />
        <TextBlock x:Name="PageTitle"
                   Text="{Binding PageName}"
                   Margin="-3,-8,0,0"
                   Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>
 
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentGrid"
          Grid.Row="1">
 
        <TextBlock Text="{Binding Welcome}"
                   Style="{StaticResource PhoneTextNormalStyle}"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="40" />
 
    </Grid>
    <Preview:BindableApplicationBar x:Name="AppBar" BarOpacity="1.0"  >
        <Preview:BindableApplicationBarIconButton Command="{Binding DisplayAbout}" 
		IconUri="/icons/appbar.questionmark.rest.png" Text="About" />
        <Preview:BindableApplicationBar.MenuItems>
            <Preview:BindableApplicationBarMenuItem  Text="Settings" 
		Command="{Binding InputBox}" />
        </Preview:BindableApplicationBar.MenuItems>
    </Preview:BindableApplicationBar>
</Grid>

步骤 7

让我们创建 RelayCommands 并将它们写入 MessageBox，方法是编辑我们的 MainViewModel.cs 文件。

public class MainViewModel : ViewModelBase
 {
     public string ApplicationTitle
     {
         get
         {
             return "MVVM LIGHT";
         }
     }
 
     public string PageName
     {
         get
         {
             return "My page:";
         }
     }
 
     public string Welcome
     {
         get
         {
             return "Welcome to MVVM Light";
         }
     }
 
     public RelayCommand DisplayAbout
     {
         get;
         private set;
     }
 
     public RelayCommand InputBox
     {
         get; 
         private set;
     }
 
     /// <summary>
     /// Initializes a new instance of the MainViewModel class.
     /// </summary>
     public MainViewModel()
     {
         if (IsInDesignMode)
         {
             // Code runs in Blend --> create design time data.
         }
         else
         {
             DisplayAbout = new RelayCommand(() =>
                                                {
                                                    MessageBox.Show("About box called!");
                                                });
             InputBox = new RelayCommand(() =>
                                            {
                                                MessageBox.Show("settings button called");
                                            });
         }
     }
}

现在运行该项目，您应该得到类似以下内容（注意底部的 AppBar）

demoapp.png

现在，如果您点击问号，您将获得以下 MessageBox

aboutboxcalled.png

MenuItem 也同样有效，例如设置

displaysettingsbutton.png

settingsbuttoncalled.png

正如您所见，将命令添加到 ApplicationBar / MenuItem 非常容易。

历史

  • 2011 年 2 月 22 日：初始发布
© . All rights reserved.