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

将事件绑定到 Silverlight MVVM 视图模型中的方法

李松博士
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (12投票s)

2011年2月24日

CPOL

6分钟阅读

viewsIcon

90575

downloadIcon

1136

本文介绍了一种在 Silverlight 应用程序的 MVVM ViewModel 中将 UI 事件绑定到相应方法中的简单方法。

引言

本文介绍了一种在 Silverlight 应用程序的 MVVM ViewModel 中将 UI 事件绑定到相应方法中的简单方法。

背景

为了完全符合 Silverlight 中的 MVVM 设计模式，我们可能希望将事件处理函数移至 ViewModel。通常，在 Silverlight 应用程序中，我们有两种 UI 组件和两种 UI 事件。

本文旨在介绍一种在 Silverlight 应用程序中将这些事件绑定到 ViewModel 中相应方法的方法，从而我们可以将所有事件处理函数实现在 ViewModel 中，从而最大程度地减少 XAML 视图的代码隐藏文件。

SolutionExplorer.JPG

附带的 Visual Studio 解决方案是在 Visual Studio 2010 和 Silverlight 4 中开发的。该解决方案有两个项目。

  • “EventBindingExample”项目是 Silverlight 应用程序。在此项目中，我将演示如何将 XAML 视图中的 UI 事件绑定到 ViewModel 中的方法。
  • “EventBindingExampleWeb”项目是一个 ASP.NET 项目，用于托管 Silverlight 应用程序。Silverlight 应用程序托管在“EventBindingExampleTestPage.aspx”页面中。“EventBindingExampleWeb”项目是 Visual Studio 创建的默认 Silverlight 宿主 Web 项目。

要使用本文中的事件绑定方法，您需要“Microsoft Expression Blend SDK”。如果还没有，您需要下载 SDK 并将其安装在您的计算机上。特别是，要将 UI 事件绑定到 ViewModel 中的相应方法，您需要添加对“Microsoft.Expression.Interactions.dll”的引用（该文件随 Blend SDK 提供）。您还需要添加对“System.Windows.Interactivity.dll”的引用。

在添加了这两个 DLL 的引用后，将 UI 事件绑定到 Silverlight ViewModel 中的方法就变得非常简单了。现在，我们将查看“EventBindingExample”Silverlight 项目的实现，以了解事件绑定是如何实现的。我们将首先查看 ViewModel。

ViewModel

“EventBindingExample”项目是一个简单的 Silverlight 应用程序，它没有数据模型。以下是在“ViewModels\MainPageViewModel.cs”文件中实现的 ViewModel 类“MainPageViewModel”。

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
 
namespace EventBindingExample.ViewModels
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        // Implementation of INotifyPropertyChanged interface
        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
        // Properties
        private string displayText;
        public string DisplayText
        {
            get { return displayText; }
            private set
            {
                displayText = value;
                NotifyPropertyChanged("DisplayText");
            }
        }
 
        // Public methods
        public void WndSizeChanged(object sender, SizeChangedEventArgs e)
        {
            DisplayText = "Window height: " + e.NewSize.Height.ToString()
                + " Window Width: " + e.NewSize.Width.ToString();
        }
    }
}

除了实现 INotifyPropertyChanged 接口外，它还有一个 public 属性和一个 public 方法。

  • 属性“DisplayText”是一个 string，它将绑定到 XAML 视图中的 TextBlock，用于显示 Silverlight 窗口的大小信息。
  • public 方法“WndSizeChanged”将绑定到 XAML 视图中 Silverlight 窗口的“SizeChanged”事件。此方法从“SizeChangedEventArgs”输入参数获取窗口大小信息，并使用它来更新“DisplayText”属性。

现在，让我们看看 ViewModel 如何绑定到 XAML 视图。

XAML 视图 “MainPage.xaml”

ViewModel 类“MainPageViewModel”绑定的 XAML 视图实现在“MainPage.xaml”文件中。

<UserControl x:Class="EventBindingExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    mc:Ignorable="d" FontFamily="Verdana" FontWeight="SemiBold">
 
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SizeChanged">
            <ei:CallMethodAction MethodName="WndSizeChanged"
                TargetObject="{Binding}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
 
    <Grid x:Name="LayoutRoot" Background="White"
          VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Foreground="Green" Text="{Binding Path=DisplayText}" />
    </Grid>
</UserControl>

ViewModel 类中的“DisplayText”属性将绑定到一个 TextBlock，ViewModel 中的“WndSizeChanged”方法将绑定到 Silverlight 窗口的“SizeChanged”事件。为了使事件绑定成功，ViewModel 中方法的签名必须与绑定事件的事件处理程序 delegate 所需的签名完全匹配。

现在，我们完成了这个演示 Silverlight 应用程序。它如此简单吗？事件绑定会奏效吗？是的，它奏效了。我们可以运行应用程序了。

运行应用程序

将“EventBindingExampleWeb”项目设置为启动项目，并将“EventBindingExampleTestPage.aspx”页面设置为起始页，我们就可以调试运行 Silverlight 应用程序了。当应用程序启动时，Silverlight 窗口的“SizeChanged”事件会触发。此事件会触发 ViewModel 中的“WndSizeChanged”方法来更新“DisplayText”属性，因此您会看到正确显示窗口的大小。

RunAppSmall.JPG

如果您更改浏览器窗口的大小，您会发现显示文本会随着您改变窗口大小而改变。

RunAppBig.JPG

结论

本文演示了我们可以将事件绑定到 Silverlight 应用程序中的 ViewModel 方法。在结束本文之前，我们将回顾在 Silverlight 应用程序中将事件绑定到 ViewModel 方法时的两个要点。

  • 要在 Silverlight 应用程序中将事件绑定到 ViewModel，您需要使用“Microsoft Expression Blend SDK”提供的功能。特别是，您需要在项目中添加对“Microsoft.Expression.Interactions.dll”和“System.Windows.Interactivity.dll”的引用。
  • 为了使事件绑定成功，ViewModel 中方法的签名必须与绑定事件的事件处理程序 delegate 所需的签名完全匹配。

关注点

  • 这篇简单的文章介绍了一种在 Silverlight 应用程序中将事件绑定到 MVVM ViewModel 中相应方法的方法。
  • 本文介绍的方法很简单。但它对于开发 Silverlight MVVM 应用程序非常重要，因为与 命令绑定结合使用时，我们可以几乎消除 XAML 视图中的所有代码隐藏方法，从而更好地遵循 MVVM 模式。
  • 根据 Pete Brown 的说法，本文介绍的方法可能比在 XAML 视图的代码隐藏文件中实现事件处理程序稍慢，因为此方法使用了 反射。此方法的优点是它适用于所有 Silverlight 组件触发的所有 UI 事件。
  • 这里介绍的方法很大程度上源自 Pete Brown 的著作《Silverlight 4 in Action》。如果您对 Silverlight 开发感兴趣，这本书应该是一个很好的参考。
  • 再次强调，MVVM 是开发 Silverlight 应用程序的一个好模式。但您仍需要根据具体情况自行判断。最佳设计模式是与您的应用程序需求最契合的模式，无论它是否是 MVVM。
  • 希望您喜欢我的帖子，也希望这篇文章能以某种方式帮助您。

历史

这是本文的第一个修订版。

© . All rights reserved.