Wpf 简明教程

WPF - Interaction

在 WPF 中，交互显示的是视图中控件之间的交互方式。最常见的交互有两种类型 −

Behaviors
Drag and Drop

Behaviors

行为是随 Expression Blend 3 引入的，它可以将一些功能封装到一个可重用的组件中。为了添加其他行为，你可以将这些组件附加到控件。行为为轻松设计复杂用户交互提供了更大的灵活性。

让我们来看一个简单的示例，其中 ControlStoryBoardAction 行为附加到控件。

使用 WPFBehavior 名称创建新的 WPF 项目。
以下 XAML 代码创建一个椭圆和两个按钮来控制椭圆的移动。

<Window
   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:local = "clr-namespace:WPFBehaviors"
   xmlns:i = "http://schemas.microsoft.com/expression/2010/interactivity"
   xmlns:ei = "http://schemas.microsoft.com/expression/2010/interactions"
   x:Class = "WPFBehaviors.MainWindow"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

   <Window.Resources>
      <Storyboard x:Key = "Storyboard1" RepeatBehavior = "Forever" AutoReverse = "True">

         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =
            "(UIElement.RenderTransform).(TransformGroup.Children )[3].(TranslateTransform.X)"
            Storyboard.TargetName = "ellipse">
            <EasingDoubleKeyFrame KeyTime = "0:0:1" Value = "301.524"/>
            <EasingDoubleKeyFrame KeyTime = "0:0:2" Value = "2.909"/>
         </DoubleAnimationUsingKeyFrames>

         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =
            "(UIElement.RenderTransform).(TransformGroup.Children )[3].(TranslateTransform.Y)"
            Storyboard.TargetName = "ellipse">
            <EasingDoubleKeyFrame KeyTime = "0:0:1" Value = "-0.485"/>
            <EasingDoubleKeyFrame KeyTime = "0:0:2" Value = "0"/>
         </DoubleAnimationUsingKeyFrames>

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "(ContentControl.Content)"
            Storyboard.TargetName = "button">
            <DiscreteObjectKeyFrame KeyTime = "0" Value = "Play"/>
         </ObjectAnimationUsingKeyFrames>

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "(ContentControl.Content)"
            Storyboard.TargetName = "button1">
            <DiscreteObjectKeyFrame KeyTime = "0" Value = "Stop"/>
            <DiscreteObjectKeyFrame KeyTime = "0:0:2" Value = "Stop"/>
         </ObjectAnimationUsingKeyFrames>
      </Storyboard>
   </Window.Resources>

   <Window.Triggers>
      <EventTrigger RoutedEvent = "FrameworkElement.Loaded">
         <BeginStoryboard Storyboard = "{StaticResource Storyboard1}"/>
      </EventTrigger>
   </Window.Triggers>

   <Grid>
      <Ellipse x:Name = "ellipse" Fill = "#FFAAAAC5" HorizontalAlignment = "Left"
         Height = "50.901" Margin = "49.324,70.922,0,0" Stroke = "Black"
         VerticalAlignment = "Top" Width = "73.684" RenderTransformOrigin = "0.5,0.5">
         <Ellipse.RenderTransform>
            <TransformGroup>
               <ScaleTransform/>
               <SkewTransform/>
               <RotateTransform/>
               <TranslateTransform/>
            </TransformGroup>
         </Ellipse.RenderTransform>
      </Ellipse>

      <Button x:Name = "button" Content = "Play" HorizontalAlignment = "Left" Height = "24.238"
         Margin = "63.867,0,0,92.953" VerticalAlignment = "Bottom" Width = "74.654">
         <i:Interaction.Triggers>
            <i:EventTrigger EventName = "Click">
               <ei:ControlStoryboardAction Storyboard = "{StaticResource Storyboard1}"/>
            </i:EventTrigger>
         </i:Interaction.Triggers>
      </Button>

      <Button x:Name = "button1" Content = "Stop" HorizontalAlignment = "Left" Height = "24.239"
         Margin = "160.82,0,0,93.922" VerticalAlignment = "Bottom" Width = "75.138">
         <i:Interaction.Triggers>
            <i:EventTrigger EventName = "Click">
               <ei:ControlStoryboardAction ControlStoryboardOption = "Stop"
                  Storyboard = "{StaticResource Storyboard1}"/>
            </i:EventTrigger>
         </i:Interaction.Triggers>
      </Button>

   </Grid>
</Window>

编译并执行上述代码后，它将生成以下包含椭圆和两个按钮的窗口。

当您按下播放按钮时，它会从左向右运动，然后返回到其原点。停止按钮将停止椭圆的运动。

Drag and Drop

用户界面上的拖放功能可以显着提高应用程序的效率和生产力。由于人们认为实施起来困难，因此很少有应用程序使用拖放功能。在一定程度上，处理拖放功能确实有难度，但在 WPF 中，您可以轻松实现这一点。

让我们通过一个简单的示例来了解其工作原理。我们将创建一个应用程序，其中您可以从一个矩形将颜色拖放到另一个矩形。

使用名称 WPFDragAndDrop 创建一个新的 WPF 项目。
将五个矩形拖放到设计窗口并设置属性，如下面的 XAML 文件所示。

<Window x:Class = "WPFDragAndDrop.MainWindow"
   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:local = "clr-namespace:WPFDragAndDrop"
   mc:Ignorable = "d" Title = "MainWindow" Height = "402.551" Width = "604">

   <Grid>
      <Rectangle Name = "Target" Fill = "AliceBlue" HorizontalAlignment = "Left"
         Height = "345" Margin = "10,10,0,0" Stroke = "Black"
         VerticalAlignment = "Top" Width = "387" AllowDrop = "True" Drop = "Target_Drop"/>

      <Rectangle Fill = "Beige" HorizontalAlignment = "Left" Height = "65"
         Margin = "402,10,0,0" Stroke = "Black" VerticalAlignment = "Top"
         Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/>

      <Rectangle Fill = "LightBlue" HorizontalAlignment = "Left" Height = "65"
         Margin = "402,80,0,0" Stroke = "Black" VerticalAlignment = "Top"
         Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/>

      <Rectangle Fill = "LightCoral" HorizontalAlignment = "Left" Height = "65"
         Margin = "402,150,0,0" Stroke = "Black" VerticalAlignment = "Top"
         Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/>

      <Rectangle Fill = "LightGray" HorizontalAlignment = "Left" Height = "65"
         Margin = "402,220,0,0" Stroke = "Black" VerticalAlignment = "Top"
         Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/>

      <Rectangle Fill = "OliveDrab" HorizontalAlignment = "Left" Height = "65"
         Margin = "402,290,0,-7" Stroke = "Black" VerticalAlignment = "Top"
         Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/>
   </Grid>

</Window>

第一个矩形是目标矩形，因此，用户可以将颜色从其他矩形拖放到目标矩形。
下面给出了拖放 C# 中的事件实现。

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WPFDragAndDrop {
   /// <summary>
      /// Interaction logic for MainWindow.xaml
   /// </summary>

   public partial class MainWindow : Window {

      public MainWindow() {
         InitializeComponent();
      }

      private void Rect_MLButtonDown(object sender, MouseButtonEventArgs e) {
         Rectangle rc = sender as Rectangle;
         DataObject data = new DataObject(rc.Fill);
         DragDrop.DoDragDrop(rc, data,DragDropEffects.Move);
      }

      private void Target_Drop(object sender, DragEventArgs e) {
         SolidColorBrush scb = (SolidColorBrush)e.Data.GetData(typeof(SolidColorBrush));
         Target.Fill = scb;
      }
   }
}

运行您的应用程序时，它将产生以下窗口。

如果您将颜色从右侧矩形拖放到左侧的大矩形，您会立即看到其影响。

让我们将右侧的第四个拖过来。

您会看到目标矩形的颜色已经改变。我们建议您执行上面的代码并尝试其功能。