Today, I try to make an UWP app with ReactiveUI and UWP Community Toolkit to do some amazing effects and animations. My main goal is to be able to add effects to my view without touching the code behind. To do that, I used a mix of behaviors, triggers and actions.

Reactive ViewModel

using ReactiveUI;
using System;
using System.Reactive;
using System.Threading.Tasks;
using UWPReactiveUI.Services.Impl;
using UWPReactiveUI.Services.Interfaces;
using UWPReactiveUI.Services.Models;

namespace UWPReactiveUI.Core
{
    public class HipsterViewModel : ReactiveObject
    {
        private ObservableAsPropertyHelper<HipsterSentence> _sentence;
        public HipsterSentence Sentence
        {
            get { return _sentence.Value; }
        }

        private ObservableAsPropertyHelper<bool> _isLoading;
        public bool IsLoading
        {
            get { return _isLoading.Value; }
        }

        public ReactiveCommand<Unit, HipsterSentence> ExecuteGetSentence { get; protected set; }

        public HipsterViewModel()
        {
            ExecuteGetSentence = ReactiveCommand.CreateFromTask(GetSentenceAsync);

            _isLoading = ExecuteGetSentence.IsExecuting.ToProperty(this, x => x.IsLoading, true);

            _sentence = ExecuteGetSentence.ToProperty(this, x => x.Sentence, new HipsterSentence { Text = "Hipster Eggs !" });
        }

        public async Task&lt;HipsterSentence&gt; GetSentenceAsync()
        {
            // We should use an IoC
            IHipsterService hipsterService = new HipsterService();

            // To be able to see the effects (for the demo)
            await Task.Delay(TimeSpan.FromSeconds(3));

            return await hipsterService.GetSentenceAsync();
        }
    }
}

The app does one thing (but do it well!) : when you execute the ExecuteGetSentence command, it returns some random ‘hipster’ sentences. It is based on this API : http://hipsterjesus.com/
If you are not very familiar with functional reactive programming, I highly recommend you to start with this introduction : https://github.com/reactiveui/ReactiveUI#introduction

Convert behavior to action

The UWP Community Toolkit give you a huge amount of eay-to-use effects (like blur, fade, scale, …) and that’s what I need here :) Let’s try to apply some blur effect on the UI when the command is launched.

The first solution is to call the effect in the code behind but I don’t want that, it hardly links the View with ViewModel :

myUIElement.Blur(value: 10, duration: 500, delay: 250);   

The second solution is to use a behavior :

<interactivity:Interaction.Behaviors>
    <behaviors:Blur Value="10" Duration="500" Delay="250" AutomaticallyStart="True" />
</interactivity:Interaction.Behaviors>

Well, it works fine but the effect is apply once and I can’t start it with some conditions. Let’s try to transform the Behavior to an Action. An Action can be call using a Trigger, a Trigger can be call using a Behavior.

Based on the behaviors source code, we can create two new classes :

CompositionActionBase.cs

using Microsoft.Toolkit.Uwp.UI.Animations.Behaviors;
using Microsoft.Xaml.Interactivity;
using Windows.UI.Xaml;

namespace UWPReactiveUI.Actions
{
    public abstract class CompositionActionBase : DependencyObject, IAction
    {
        /// <summary>
        /// The duration of the animation.
        /// </summary>
        public static readonly DependencyProperty DurationProperty = DependencyProperty.Register(nameof(Duration), typeof(double), typeof(CompositionBehaviorBase), new PropertyMetadata(1d));

        /// <summary>
        /// The delay of the animation.
        /// </summary>
        public static readonly DependencyProperty DelayProperty = DependencyProperty.Register(nameof(Delay), typeof(double), typeof(CompositionBehaviorBase), new PropertyMetadata(0d));

        /// <summary>
        /// Gets or sets the delay.
        /// </summary>
        /// <value>
        /// The delay.
        /// </value>
        public double Delay
        {
            get { return (double)GetValue(DelayProperty); }
            set { SetValue(DelayProperty, value); }
        }

        /// <summary>
        /// Gets or sets the duration.
        /// </summary>
        /// <value>
        /// The duration.
        /// </value>
        public double Duration
        {
            get { return (double)GetValue(DurationProperty); }
            set { SetValue(DurationProperty, value); }
        }

        public abstract object Execute(object sender, object parameter);
    }
}

Blur.cs

using Microsoft.Toolkit.Uwp.UI.Animations;
using Windows.UI.Xaml;

namespace UWPReactiveUI.Actions
{
    public class Blur : CompositionActionBase
    {
        /// <summary>
        /// The Opacity value of the associated object
        /// </summary>
        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(nameof(Value), typeof(double), typeof(Blur), new PropertyMetadata(1d));

        /// <summary>
        /// Gets or sets the Opacity.
        /// </summary>
        /// <value>
        /// The Opacity.
        /// </value>
        public double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        public override object Execute(object sender, object parameter)
        {
            var element = sender as FrameworkElement;
            if (element == null)
                return false;

            if (AnimationExtensions.IsBlurSupported)
            {
                element.Blur(duration: Duration, delay: Delay, value: (float)Value)?.Start();
            }
            return true;
        }
    }
}

Reactive View

We can now use a DataTriggerBehavior to execute the blur action if a condition is valid (IsLoading == true).

<Page x:Class="UWPReactiveUI.MainPage" 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:core="using:UWPReactiveUI.Core" xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:trigger="using:Microsoft.Xaml.Interactions.Core" xmlns:actions="using:UWPReactiveUI.Actions" mc:Ignorable="d">
    <Page.DataContext>
        <core:HipsterViewModel />
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Border BorderBrush="BurlyWood" BorderThickness="1" Margin="10">
            <Border>
                <interactivity:Interaction.Behaviors>
                    <trigger:DataTriggerBehavior Binding="{x:Bind ViewModel.IsLoading, Mode=OneWay}" Value="True">
                        <actions:Blur Value="3" Duration="1000" Delay="0" />
                    </trigger:DataTriggerBehavior>
                    <trigger:DataTriggerBehavior Binding="{x:Bind ViewModel.IsLoading, Mode=OneWay}" Value="False">
                        <actions:Blur Value="0" Duration="1000" Delay="0" />
                    </trigger:DataTriggerBehavior>
                </interactivity:Interaction.Behaviors>

                <TextBlock Text="{x:Bind ViewModel.Sentence.Text, Mode=OneWay}" TextWrapping="WrapWholeWords" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="3" />
            </Border>
        </Border>

        <ProgressRing VerticalAlignment="Center" HorizontalAlignment="Center" IsActive="True" Width="50" Height="50" Visibility="{x:Bind ViewModel.IsLoading, Converter={StaticResource BooleanToVisibilityConverter},Mode=OneWay}" />

        <Button Grid.Row="2" Margin="10" Command="{x:Bind ViewModel.ExecuteGetSentence, Mode=OneWay}" Content="GET SENTENCE" />

    </Grid>
</Page>

Another solution

You can also use the VisualStateManager to handle conditional states to call actions.

Source code

https://github.com/Lordinaire/UWP_ReactiveUI_Sample