WPF Interaction - Windows Presentation Foundation(WPF)

What is WPF Interaction?

In WPF, an interaction show how an analysis interacts with controls located in that view. The most normally known interactions are of two types −

• Behaviours
• Drag and Drop

Behaviours

Behaviours were introduced with Expression Blend 3 which can encapsulate some of the functionality into a reusable constituent. To add additional behaviours, you can attach these components to the controls. Behaviours present more flexibility to design complex user interactions simply.

Let’s take a look at a simple instance in which ControlStoryBoardAction behaviour is attach to controls.

• Create a new WPF project with the name WPFBehavior.
• The following XAML code creates an ellipse and two buttons to control the movement of the ellipse.

<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 = "Main Window" Height = "350" Width = "604"> <Window. Resources> <Storyboard x: Key = "Storyboard1" RepeatBehavior = "Forever" Auto Reverse = "True"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "(UIElement.RenderTransform).(TransformGroup.Children )[3].(TranslateTransform.X)" Storyboard.TargetName = "ellipse"> <EasingDoubleKeyFrame Key Time = "0:0:1" Value = "301.524"/> <EasingDoubleKeyFrame Key Time = "0:0:2" Value = "2.909"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "(UIElement.RenderTransform).(TransformGroup.Children )[3].(TranslateTransform.Y)" Storyboard.TargetName = "ellipse"> <EasingDoubleKeyFrame Key Time = "0:0:1" Value = "-0.485"/> <EasingDoubleKeyFrame Key Time = "0:0:2" Value = "0"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "(ContentControl.Content)" Storyboard.TargetName = "button"> <DiscreteObjectKeyFrame Key Time = "0" Value = "Play"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "(ContentControl.Content)" Storyboard.TargetName = "button1"> <DiscreteObjectKeyFrame Key Time = "0" Value = "Stop"/> <DiscreteObjectKeyFrame Key Time = "0:0:2" Value = "Stop"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </Window. Resources> <Window. Triggers> <Event Trigger Routed Event = "FrameworkElement.Loaded"> <Begin Storyboard = "{Static Resource Storyboard1}"/> </Event Trigger> </Window. Triggers> <Grid> <Ellipse x: Name = "ellipse" Fill = "#FFAAAAC5" Horizontal Alignment = "Left" Height = "50.901" Margin = "49.324, 70.922, 0, 0" Stroke = "Black" Vertical Alignment = "Top" Width = "73.684" RenderTransformOrigin = "0.5,0.5"> <Ellipse.RenderTransform> <Transform Group> <Scale Transform/> <Skew Transform/> <Rotate Transform/> <Translate Transform/> </Transform Group> </Ellipse.RenderTransform> </Ellipse> <Button x: Name = "button" Content = "Play" Horizontal Alignment = "Left" Height = "24.238" Margin = "63.867, 0, 0, 92.953" Vertical Alignment = "Bottom" Width = "74.654"> <i:Interaction.Triggers> <i: EventTrigger Event Name = "Click"> <ei: ControlStoryboardAction Storyboard = "{Static Resource Storyboard1}"/> </i: EventTrigger> </i: Interaction.Triggers> </Button> <Button x: Name = "button1" Content = "Stop" Horizontal Alignment = "Left" Height = "24.239" Margin = "160.82, 0, 0, 93.922" Vertical Alignment = "Bottom" Width = "75.138"> <I: Interaction.Triggers> <I: Event Trigger Event Name = "Click"> <ei: ControlStoryboardAction ControlStoryboardOption = "Stop" Storyboard = "{Static Resource Storyboard1}"/> </i: EventTrigger> </i: Interaction.Triggers> </Button> </Grid> </Window>

When you accumulate and execute the above code, it will construct the following window which contains an ellipse and two buttons.

When you press the play button, it will start moving from left to right and then will return to its unique position. The stop button will stop the association the ellipse.

Drag and Drop

Drag and Drop on user interface can considerably advance the efficiency and productivity of the application. There are very a small number of applications in which drag and drop features are used because people think it is complex to implement. To a level, it is difficult to handle a drag and drop feature, but in WPF, you can handle it quite easily.

Let’s take a easy instance to understand how it works. We will create an application wherein you can drag and drop colour from one rectangle to another.

• Create a new WPF project with the name WPFDragAndDrop.
• Drag five rectangles to the design window and set the properties as shown in the following XAML file.

<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 = "Main Window" Height = "402.551" Width = "604"> <Grid> <Rectangle Name = "Target" Fill = "Alice Blue" Horizontal Alignment = "Left" Height = "345" Margin = "10, 10, 0, 0" Stroke = "Black" Vertical Alignment = "Top" Width = "387" Allow Drop = "True" Drop = "Target Drop"/> <Rectangle Fill = "Beige" Horizontal Alignment = "Left" Height = "65" Margin = "402, 10, 0, 0" Stroke = "Black" Vertical Alignment = "Top" Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/> <Rectangle Fill = "Light Blue" Horizontal Alignment = "Left" Height = "65" Margin = "402, 80, 0, 0" Stroke = "Black" Vertical Alignment = "Top" Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/> <Rectangle Fill = "Light Coral" Horizontal Alignment = "Left" Height = "65" Margin = "402, 150, 0, 0" Stroke = "Black" Vertical Alignment = "Top" Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/> <Rectangle Fill = "Light Gray" Horizontal Alignment = "Left" Height = "65" Margin = "402, 220, 0, 0" Stroke = "Black" Vertical Alignment = "Top" Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/> <Rectangle Fill = "Olive Drab" Horizontal Alignment = "Left" Height = "65" Margin = "402, 290, 0,-7" Stroke = "Black" Vertical Alignment = "Top" Width = "184" MouseLeftButtonDown = "Rect_MLButtonDown"/> </Grid> </Window>

• The first rectangle is the target rectangle, so the user can drag the color from the other rectangle to the target rectangle.
• Given below is the events implementation in C# for drag and drop.

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 Main Window : Window { Public Main Window () { Initialize Component (); } Private void Rect_MLButtonDown (object sender, MouseButtonEventArgs e) { Rectangle arc = sender as Rectangle; Data Object data = new Data Object (rc.Fill); DragDrop.DoDragDrop (arc, data, DragDropEffects.Move); } Private void Target Drop (object sender, DragEventArgs e) { SolidColorBrush scab = (SolidColorBrush) e.Data.GetData (type of(SolidColorBrush)); Target. Fill = scab; } } }

When you run your application, it will produce the following window.

If you drag a colour from the rectangle on the right side and drop it on the large rectangle to the left, you will observe its effect immediately.
Let’s drag the 4th one from the right side.

You can observe that the colour of the target rectangle has transformed. We suggest that you execute the above code and research with its description.