Maxime FRAPPAT

Hum …no thanks ! – Lordinaire

Category: C# (Page 3 of 13)

[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

 

[Xamarin] Hololens app with UrhoSharp : Spatial Mapping – Part 3

Today, we will try to detect our environment with the spatial mapping. That mechanism allows us to detect real life objects, like a floor or a table, and gets back information in order to build a virtual object that will be the representation of the real object.

Let me do it, please

First of all, we need to add the spatial mapping capability in our project by editing the Package.appxmanifest :

<Package   xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"   
           xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"   
           xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"   
           xmlns:uap2="http://schemas.microsoft.com/appx/manifest/uap/windows10/2"
           IgnorableNamespaces="uap mp">
 
 ...  
  <Capabilities>
    <span style="color: #ff0000;"><uap2:Capability Name="spatialPerception"/></span>
  </Capabilities>
</Package>

Override as always

The UrhoSharp framework has already handle basic scenario like spatial mapping in the class HoloApplication (the base class of or app). We only need to override some methods and enable some properties to be able to catch spatial mapping data. Our scenario will be very simple :

  • Start detection
  • Display detected objects (wireframe)
  • Tap to stop detection
  • Hide detected objects
  • Baaaaaaaaaaaaaaalls !

Let’s begin with the Start method :

private bool _isSpatialMappingActive;
 
private Node _detectedSurfaceNode;
 
protected override async void Start()
{
    base.Start();
 
    // Enable the AirTap gesture
    EnableGestureTapped = true;
 
    // Create a new node to store all the detected objects we will create
    _detectedSurfaceNode = Scene.CreateChild();
    _isSpatialMappingActive = true;
 
    // Start the detection
    await StartSpatialMapping(new Vector3(10, 10, 10));
}

For the Update method, just add a new condition :

protected override void OnUpdate(float timeStep)
{
    base.OnUpdate(timeStep);
 
    // Don't do anything if the detection is activated
    if (_isSpatialMappingActive)
        return;
 
    _spawnDeltaTime += timeStep;
    if (_spawnDeltaTime >= _spawnTimer)
    {
        _spawnDeltaTime = 0;
 
        var randomPosition = new Vector3(Randoms.Next(-0.3f, 0.3f), Randoms.Next(-0.3f, 0.3f), Randoms.Next(2, 5));
        CreateBall(randomPosition);
    }
}

The real stuff starting here. We will override the method OnSurfaceAddedOrUpdated like that :

public override void OnSurfaceAddedOrUpdated(string surfaceId, DateTimeOffset lastUpdateTimeUtc, SpatialVertex[] vertexData,
    short[] indexData, Vector3 boundsCenter, Quaternion boundsRotation)
{
    StaticModel model;

    // If the surface already exists get its node otherwise creates a new one
    var node = _detectedSurfaceNode.GetChild(surfaceId, false);
    if (node != null)
    {
        model = node.GetComponent<StaticModel>();
    }
    else
    {
        node = _detectedSurfaceNode.CreateChild(surfaceId);
        model = node.CreateComponent<StaticModel>();
    }

    // Set the position and rotation
    node.Position = boundsCenter;
    node.Rotation = boundsRotation;

    // The model is created with the vertex data
    model.Model = CreateModelFromVertexData(vertexData, indexData);

    // Add a rigidbody for the physic engine
    node.CreateComponent<RigidBody>();

    // Add a collision shape based on the model
    var shape = node.CreateComponent<CollisionShape>();
    shape.SetTriangleMesh(model.Model, 0, Vector3.One, Vector3.Zero, Quaternion.Identity);

    // Add a material for our model (a green wireframe)
    var material = Material.FromColor(Color.Green);
    material.FillMode = FillMode.Wireframe;
    model.SetMaterial(material);
}

To handle the Tap gesture, override the OnGestureTapped method :

public override void OnGestureTapped(GazeInfo gaze)
{
    base.OnGestureTapped(gaze);

    // Stop the detection
    _isSpatialMappingActive = false;
    StopSpatialMapping();

    // Disable wireframe models but keep the rest (RigidBody, CollisionShape)
    // to interact with it
    var childCount = _detectedSurfaceNode.GetNumChildren(false);
    for (uint i = 0; i < childCount; i++)
    {
        var childNode = _detectedSurfaceNode.GetChild(i);
        var model = childNode.GetComponent<StaticModel>();
        model.Enabled = false;
    }
}

That’s it folks !

Page 3 of 13

Powered by WordPress & Theme by Anders Norén

%d bloggers like this: