Triggers, actions & behaviors in XAML

Triggers, Actions Triggers, Actions & Behaviors& Behaviors

Eyal VardiEyal VardiCEO E4D Solutions LTDCEO E4D Solutions LTDMicrosoft MVP Visual C#Microsoft MVP Visual C#blog: www.eVardi.comblog: www.eVardi.com

© 2008 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]

AgendaAgenda

ActionsActions

TriggersTriggers

BehaviorsBehaviors


Old WPF Old WPF ( No Silverlight )( No Silverlight )

<Button Content="Click Me"> <Button.Triggers>

<EventTrigger RoutedEvent="Click"> <EventTrigger.Actions> <BeginStoryboard Storyboard="{StaticResource sbSpin}"/> </EventTrigger.Actions> </EventTrigger>

<MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="Content" Value="{x:Null}" /> </MultiTrigger.Conditions> <Setter Property="Background" Value="Yellow" /> </MultiTrigger> </Button.Triggers> </Button>

<Button Content="Click Me"> <Button.Triggers>

<EventTrigger RoutedEvent="Click"> <EventTrigger.Actions> <BeginStoryboard Storyboard="{StaticResource sbSpin}"/> </EventTrigger.Actions> </EventTrigger>

<MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="Content" Value="{x:Null}" /> </MultiTrigger.Conditions> <Setter Property="Background" Value="Yellow" /> </MultiTrigger> </Button.Triggers> </Button>


.NET 3.5 WPF .NET 3.5 WPF ( When __, Do __ )( When __, Do __ )


Action WayAction Way<Button Content="Click Me"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <E4D:MyAction TargetName="lbTrace" /> </i:EventTrigger></i:Interaction.Triggers>

</Button>

<Button Content="Click Me"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <E4D:MyAction TargetName="lbTrace" /> </i:EventTrigger></i:Interaction.Triggers>

</Button>

public class MyAction : TargetedTriggerAction<DependencyObject>{ public MyAction() { ... }

protected override void Invoke(object o) { ... }}

public class MyAction : TargetedTriggerAction<DependencyObject>{ public MyAction() { ... }

protected override void Invoke(object o) { ... }}


Perform on Perform on somebody elsesomebody else


ActionAction


Trigger Trigger ( When )( When )

Invokes a bunch of actions at a point when it Invokes a bunch of actions at a point when it decides to do that.decides to do that. Event TriggerEvent Trigger Timer TriggerTimer Trigger Size TriggerSize Trigger

The Attach & Detach connect toThe Attach & Detach connect tothe target.the target.


Timer Trigger SampleTimer Trigger Samplepublic class TimerTrigger : TriggerBase<DependencyObject>{ public TimeSpan Interval { get; set; }

protected override void OnAttached() { timer = new DispatcherTimer(); timer.Interval = Interval; timer.Tick += OnTick; timer.Start(); }

void OnTick(object sender, EventArgs e) { this.InvokeActions(null); }

protected override void OnDetaching() { timer.Tick -= OnTick; timer = null; } DispatcherTimer timer;}

public class TimerTrigger : TriggerBase<DependencyObject>{ public TimeSpan Interval { get; set; }

protected override void OnAttached() { timer = new DispatcherTimer(); timer.Interval = Interval; timer.Tick += OnTick; timer.Start(); }

void OnTick(object sender, EventArgs e) { this.InvokeActions(null); }

protected override void OnDetaching() { timer.Tick -= OnTick; timer = null; } DispatcherTimer timer;}


Custom TriggerCustom Trigger


BehaviorBehavior

Behavior Behavior don’t need don’t need the “the “WhenWhen” ( Trigger ),” ( Trigger ),and and don’t have don’t have the the InvokeInvoke..


Behavior with CommandBehavior with Command

public class MethodBehavior : Behavior<DependencyObject>{ public ICommand Command { get; set; }

public MethodBehavior() {

Command = new ActionCommand( MyMethod ); }

private void MyMethod() { // TODO: }}

public class MethodBehavior : Behavior<DependencyObject>{ public ICommand Command { get; set; }

public MethodBehavior() {

Command = new ActionCommand( MyMethod ); }

private void MyMethod() { // TODO: }}

<Button Content="Click Me“> <i:Interaction.Behaviors> <E4D:MethodBehavior>

<i:Interaction.Triggers><i:KeyTrigger SourceName="..."> <i:InvokeCommandAction

CommandName="Command" /></i:KeyTrigger>

</i:Interaction.Triggers></E4D:MethodBehavior>

</i:Interaction.Behaviors></Button>

<Button Content="Click Me“> <i:Interaction.Behaviors> <E4D:MethodBehavior>

<i:Interaction.Triggers><i:KeyTrigger SourceName="..."> <i:InvokeCommandAction

CommandName="Command" /></i:KeyTrigger>

</i:Interaction.Triggers></E4D:MethodBehavior>

</i:Interaction.Behaviors></Button>


BehaviorsBehaviors


Blend BehaviorsBlend Behaviors


Fluid Move BehaviorFluid Move Behavior

Behavior that watches an element (or a set of Behavior that watches an element (or a set of elements) for layout changes, and moves the elements) for layout changes, and moves the element smoothly to the new position when element smoothly to the new position when needed.needed.

<ei:FluidMoveBehavior Duration="00:00:01" AppliesTo="Children"> <ei:FluidMoveBehavior.EaseY> <BackEase EasingMode="EaseOut" Amplitude="0.5"/> </ei:FluidMoveBehavior.EaseY> <ei:FluidMoveBehavior.EaseX> <BackEase EasingMode="EaseOut" Amplitude="0.5"/> </ei:FluidMoveBehavior.EaseX></ei:FluidMoveBehavior>

<ei:FluidMoveBehavior Duration="00:00:01" AppliesTo="Children"> <ei:FluidMoveBehavior.EaseY> <BackEase EasingMode="EaseOut" Amplitude="0.5"/> </ei:FluidMoveBehavior.EaseY> <ei:FluidMoveBehavior.EaseX> <BackEase EasingMode="EaseOut" Amplitude="0.5"/> </ei:FluidMoveBehavior.EaseX></ei:FluidMoveBehavior>






Fluid Layout in VSMFluid Layout in VSM

Animation between states.Animation between states. - Transition Effect- Transition Effect - Easing Function - Easing Function


Fluid Layout in VSMFluid Layout in VSM


Layout States & TransitionLayout States & Transition

Layout States animate the state changes for Layout States animate the state changes for you at the appropriate times, as your items are you at the appropriate times, as your items are added to or removed from the list. added to or removed from the list.

Edit the ItemContainerStyle and ItemsPanel.Edit the ItemContainerStyle and ItemsPanel.


Layout States & Layout States & TransitionTransition


FluidMoveTagSetBehavior FluidMoveTagSetBehavior


Fluid Move Tag Set Fluid Move Tag Set BehaviorBehavior

Design

Triggers, actions & behaviors in XAML