How to Use BehaviorSDK and behaviorsdk

[Go] How to Use BehaviorSDK and behaviorsdk

Address: http://blogs.msdn.com/ B /windows8devsupport/archive/2014/10/24/behaviorsdk.aspx

 

Preface

During the development process, programmers generally process the background logic in the form of code and separate the design from the foreground UI, which is why the MVVM design mode is generated. In front-end design, some of the simplest user interaction logic will inevitably be involved, such as page navigation, playing music, and executing an animation.

Here I will introduce a BehaviorSDK, which can help us quickly add some simple interactions during front-end design.

How to add BehaviorSDK reference

BehaviorSDK will be installed with Visual Studio 2013. When used, developers only need to add a reference to BehaviorSDK in the reference manager.

When using in XAML, developers also need to make reference in XAML (for details, see the bold Section of the following code ).

<Page    x:Class="BehaviorSDK.SamplePage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:BehaviorSDK"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"       xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"    xmlns:Media="using:Microsoft.Xaml.Interactions.Media"    >

BehaviorSDK official documentation

Document entry: https://msdn.microsoft.com/zh-cn/library/windows/apps/dn457340.aspx

For more details, read the original English document. The following describes some simple usage of BehaviorSDK. The sample code is provided at the end of this article.

Function: Intercommunication

Microsoft. Xaml. Interactions. Core helps us implement the intercommunication function:

API	Explanation
CallMethodAction	Action when a method is called
ChangePropertyAction	Action when a property changes
DataTriggerBehavior	Behavior when the bound data meets a specific condition
EventTriggerBehavior	Behavior when an event is triggered
GoToStateAction	The action that is used to enter a visual state of the control.
IncrementalUpdateBehavior	Behavior when Lazy Loading is updated
InvokeCommandAction	The action of executing a specified command.
NavigateToPageAction	It can be used to navigate to another page.

How to navigate to another page

Here is a simple example to illustrate. If we need to click a Button to navigate to another page and use the traditional implementation method, we need to add the following code to the backend cs:

Private void Button_Click (object sender, RoutedEventArgs e) {this. Frame. Navigate (typeof (BasicPage1), "I Navigate to this page through the background code Button Click Event ");}

However, with the BehaviorSDK, the processing can be completed as long as it is in XAML. The method is as follows:

1. Capture the Click event through EventTrigger

2. Navigate to another page through NavigateToPageAction

The specific implementation of The XAML code is as follows:

<Button Content = "click my BehaviorSDK to navigate to another page" HorizontalAlignment = "Left" Height = "209" Margin = "647,161, 421 "VerticalAlignment =" Top "Width =" "> <Interactivity: Interaction. behaviors> <Core: EventTriggerBehavior EventName = "Click"> <Core: NavigateToPageAction TargetPage = "BehaviorSDK. basicPage1 "Parameter =" I used BehaviorSDK to navigate to this page "/> </Core: EventTriggerBehavior> </Interactivity: Interaction. behaviors> </Button>

Note the following two points:

1. The Target Page must be a full name, including the project NameSpace. The String type is accepted.

2. Parameter can be an Object type. In this example, a String is put, and other controls can be bound as needed.

How to call a Command

We also need to monitor whether the Click event is triggered by EventTrigger. The difference is that a Command is called in this example:

<Button Content = "click to call a Command" HorizontalAlignment = "Left" Height = "212" Margin = "121,440, 415 "VerticalAlignment =" Top "Width =" "> <Interactivity: Interaction. behaviors> <Core: EventTriggerBehavior EventName = "Click"> <Core: invokeCommandAction Command = "{Binding Source = {StaticResource command}" CommandParameter = "I Am a passed parameter"/> </Core: EventTriggerBehavior> </Interactivity: Interaction. behaviors> </Button>

The effect is as follows:

 

How to trigger a visual effect

Here we use buttons as an example. A button has many different visual effects. For example, when the mouse moves in, there will be a gray background, and when the mouse clicks, the background will become white, this is achieved through different visual effects.

Imagine the following scenario: when we move the mouse to button 1, the background color of Button 2 changes accordingly. If we are writing C # code, we will implement it in GoToState mode, behaviorSDK provides a more direct method:

<Button Content = "when the mouse is moved in/out, the Button on the Left will display different states" HorizontalAlignment = "Left" Height = "206" Margin = "650,443, 415 "VerticalAlignment =" Top "Width =" "> <Interactivity: Interaction. behaviors> <Core: EventTriggerBehavior EventName = "PointerEntered"> <Core: GoToStateAction StateName = "PointerOver" TargetObject = "{Binding ElementName = button}"/> </Core: eventTriggerBehavior> <Core: EventTriggerBehavior EventName = "PointerExited"> <Core: GoToStateAction StateName = "Normal" TargetObject = "{Binding ElementName = button}"/> </Core: eventTriggerBehavior> </Interactivity: Interaction. behaviors> </Button>

When we move the mouse to/from the right button, the button on the left will also change:

Others

We can also implement many other functions, which need to be constantly explored during use. For example, to call a method, for example, to change a certain attribute, the article will not be detailed here because of the limited length of the article.

Function: multimedia

The Microsoft. Xaml. Interactions. Media class can help us achieve this. There are few methods in this class. There are two, one, how to control a StoryBoard, two, and how to play a multimedia file. There are not many functions, but they are all very practical. Let's talk about them one by one:

How to control a StoryBoard

Here we still use button-clicking events to trigger an animation effect as an example. Using Media: ControlStoryboardAction can control the playback and content of the animation, we can use the ControlStoryboardOption Enumeration document to view the specific situation.

<Button Content = "click to execute an animation" HorizontalAlignment = "Left" Height = "124" Margin = "124,472, 412 "VerticalAlignment =" Top "Width =" "> <Interactivity: Interaction. behaviors> <Core: EventTriggerBehavior EventName = "Click"> <Media: ControlStoryboardAction ControlStoryboardOption = "Play" Storyboard = "{Binding ElementName = mystoryboard}"/> </Core: eventTriggerBehavior> </Interactivity: Interaction. behaviors> </Button> <Rectangle x: Name = "rectangle" Fill = "# FFF4F4F5" HorizontalAlignment = "Left" Height = "49" Margin = "653,504, 0.5 "Stroke =" Black "verticalignment =" Top "Width =" 49 "RenderTransformOrigin =" 0.5, "> <Rectangle. resources> <Storyboard x: Name = "mystoryboard"> <DoubleAnimationUsingKeyFrames Storyboard. targetProperty = "(UIElement. renderTransform ). (CompositeTransform. scaleX) "Storyboard. targetName = "rectangle"> <EasingDoubleKeyFrame KeyTime = "0" Value = "1"/> <EasingDoubleKeyFrame KeyTime = "" Value = "3"/> </DoubleAnimationUsingKeyFrames> <strong storyboard. targetProperty = "(UIElement. renderTransform ). (CompositeTransform. scaleY) "Storyboard. targetName = "rectangle"> <EasingDoubleKeyFrame KeyTime = "0" Value = "1"/> <EasingDoubleKeyFrame KeyTime = "" Value = "3"/> </DoubleAnimationUsingKeyFrames> </ storyboard> </Rectangle. resources> <Rectangle. renderTransform> <CompositeTransform/> </Rectangle. renderTransform> </Rectangle>

How to play an audio file

Background Music can bring a good user experience, and proper use can greatly improve user satisfaction. So here we will detail how to play an audio file.

Note: I downloaded the music from an open-source music library. If the author finds that the music is not authorized to this website, we will modify it. We apologize for any inconvenience caused.

<Button Content = "Click me to play background music" HorizontalAlignment = "Left" Height = "118" Margin = "653,475, 409 "VerticalAlignment =" Top "Width =" "> <Interactivity: Interaction. behaviors> <Core: EventTriggerBehavior EventName = "Click"> <Media: PlaySoundAction Source = "Sound/mp3.mp3" Volume = "0.5"/> </Core: EventTriggerBehavior> </Interactivity: interaction. behaviors> </Button>

Summary

All the above functions can be easily implemented in Blend. Blend will automatically add the code for us to make the programming process easier. For details, see the following:

The above sample code is shared in OneDrive: http://1drv.ms/1yvrtggfor your reference.