MVVM light toolkit学习笔记4

Silverlight 4: Drag&drop with EventToCommand翻译

 

这里翻译一个关于拖拽的EventToCommand的实例。

 

• 首先，我们创建一个可拖拽的Silverlight4应用程序，如图

可以使用VS2010或者blend4来创建

      我们需要为应用程序中的文件定义为拖动目标，你可以将任何UI元素设置为可拖动，比如主Grid（这样可以让整个应用程序拖拽的目标）或其他的。为了简便，在我们的例子中，我们使用主Grid作为拖拽目标。

 

•     设置AllowDrop 属性为True，如图

    代码如下：

<Grid x:Name="LayoutRoot"
      AllowDrop="True"
      Background="#FF9F9F9F">
    <TextBlock FontSize="36"
               FontWeight="Bold"
               Foreground="Purple"
               Text="{Binding DroppedFileContent}"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               TextWrapping="Wrap"
               TextTrimming="WordEllipsis" />
</Grid>

•     打开MainViewModel，添加一个绑定属性。
• 提示,如果你安装了MVVM light toolkit（包括代码片段），你可以使用以下快捷键：
• 键入mvvminpc，敲tab键展开代码片段，输入属性名称，再按tab键，设置属性类型，再按tab键设置属性值，代码如下：

  /// <summary>
  /// The <see cref="DroppedFileContent" /> property's name.
  /// </summary>
  public const string DroppedFileContentPropertyName = "DroppedFileContent";
  
  private string _droppedFile = "Drop file here";
  
  /// <summary>
  /// Gets the DroppedFileContent property.
  /// Changes to that property's value raise the PropertyChanged event. 
  /// </summary>
  public string DroppedFileContent
  {
      get
      {
          return _droppedFile;
      }
  
      set
      {
          if (_droppedFile == value)
          {
              return;
          }
  
          _droppedFile = value;
          RaisePropertyChanged(DroppedFileContentPropertyName);
      }
  }

 

•     之后我们在MainViewModel中添加RelayCommand<DragEventArgs>属性。将其命名为HandleDrapCommand。此时需要Galasoft.MvvmLight.Command和System以及System.Windows的命名空间引用。代码如下：

public RelayCommand<DragEventArgs> HandleDropCommand { get;private set; }

• 最后，在MainViewModel的构造函数中，初始化该事件。我们使用它做一个简单的弹出框。代码如下：

HandleDropCommand = new RelayCommand<DragEventArgs>(e => { System.Windows.MessageBox.Show("Drop"); });

• 在main grid中添加一个EventToCommand 触发。该元素是Galasoft.MvvmLight.Extras Dll中的，我们使用我们的模板会自动添加该引用。否则，请手工添加GalaSoft.MvvmLight.dll, GalaSoft.MvvmLight.Extras.dll and System.Windows.Interactivity.dll 这些引用

现在已经差不多了，我们编译下该应用程序。

使用blend打开，在Assets标签中，从Behaviors分类中选择EventToCommand，并拖拽到Grid中

设置，如图

事件的EventName属性为“Drop”

绑定命令属性，如图

    

注意：如果并没有使用MVVM模板创建，需要手工添加相关代码：

1、在MainPage.xaml中，添加命名空间：

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"

2、手工添加事件触发代码

<i:Interaction.Triggers><i:EventTrigger EventName="Drop" SourceName="LayoutRoot" ><GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding HandleDropCommand, Mode=OneWay}"/></i:EventTrigger></i:Interaction.Triggers>

此时就可以做测试了，我们可以看到将文件拖入控件位置是，鼠标的样式已经发生了变化（其实这只是设置AllowDrop="True"
后的效果）

放开鼠标，你可以看到已经执行了我们刚才编写的弹出窗口。

 

下面我们改写弹出窗口的代码为：

if (e.Data == null)
{
    return;
}

var files = e.Data.GetData(DataFormats.FileDrop)
    as FileInfo[];

// This works with multiple files, but in that
// simple case, let's just handle the 1st one
if (files == null
    || files.Length == 0)
{
    DroppedFileContent = "No files";
    return;
}

var file = files[0];

if (!file.Extension.ToLower().Equals(".txt"))
{
    DroppedFileContent = "Not a TXT file";
    return;
}

using (var stream = file.OpenRead())
{
    using (var reader = new StreamReader(stream))
    {
        // Read the first line
        var line = reader.ReadLine();
        DroppedFileContent = line;
    }
}

从这段代码中，可以看到：

1、你可以通过DragEventArgs.Data.GetData方法使用拖进目标的文件引用

2、由于Silverlight是一个安全的沙箱，所以如果你访问文件的全名（含路径）时，会抛出一个安全的异常。但是你可以访问文件的内容。

3、示例中，我们只获取了第一个文件的内容，但事实上我们很容易获得所有拖入的文件。

 

 

通过 Wiz 发布