Maxime FRAPPAT

Hum …no thanks ! – Lordinaire

Page 3 of 18

[UWP] ReactiveUI & UWP Community Toolkit

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

 

[Tips] Can’t share drives in Docker on Windows with Azure AD account

Few weeks ago, I tried to create a new ASP .NET Core Web Application with Visual Studio 2017 RC in order to use it with Docker.

The creation step worked fine, I can build the solution but if I launch it, it fails with that error :

ERROR: for webapplication3  Cannot create container for service webapplication3: C: drive is not shared. Please share it in Docker for Windows Settings

At first sigh, this is obvious that I need to share my C: drive to Docker. If I don’t do that, it can’t access to the project/container. So let’s go !

Here’s the few steps I made :

…but it seems that if you are logged with an Azure AD account, Docker failed to share drives. So, if you can’t wait for a fix, you can create a local account on your machine and repeat all the steps. That’s not an ideal solution but it works !

 

 

Page 3 of 18

Powered by WordPress & Theme by Anders Norén

%d bloggers like this: