Analyzing Paint 3D 2/2

The Paint 3D app has been updated, and they have solved the issue shown in the previous post Analyzing Paint 3D 1/2 , now if you press tab, it will only cycle around the control PaintDialog.


I have also taken a look to all the fonts in the system for Paint, Edge, and more fonts. At the moment all remain the same. You find them by searching *.ttf in Windows/SystemApps.

There are no news about using SVGImageSource instead Canvas Path for the tool icons. I understand will be changed in the CreatorsUpdate.

Before digging about the properties and structure of the controls, you can take a look to them with Visual Studio. Create a new project and add the references from the winmd files, then you will be able to open that:


It is only the information from the metatada, not the source code, so you won’t able to use that. But it is interesting because you can do it directly from VS.

Let’s analyze first the visuals left from the previous post and then the rest of the controls.


In this release, we still have a rectangle with a lineargradientbrush for the shadows of the panels, they have the following properties:


If you do not usually apply linear gradient brushes, you can get more information at msdn uwp brushes.

Now you can apply the same shadow in your apps, let’s take a look to the controls that appear like a popup.


It is a Content Control that simulates a popup dialog. It does not appear in the Canvas Panel of the Popups, it is inside the main visual tree and the controls have this inside to show its functionality limiting the actions inside it.



This is a control that appears with a PaintDialog, it has a shadow, really complex because it has a Shadow Grid with 7 borders to make the shadow. It bothers my who decided and why to do that:


The background brush of this control, is defined in the DropShadowBorder #FFF6F6F6, it is not an static resource, I cannot assure that, but apparently it is. The margin of the header is 24,28,0,0. So now are a factor x4. and the color of the title is Black with 0.6 of opacity.

The color selector is SaturationGradient.png inside Content folder that looks like the following:


And below contains the color which is binded to the color of other Control.

The slider to change the hue, has been customized with a gradient with 29 stops:


I understand this gradient has been made with a tool, and not hardcoded. I would like to see more Win2D and Composition in this app but at the moment nothing really surprising.

After looking the rest of the information that can be extracted, and watching that the SwapChainPanel does not show any information when is used in 3D, I decided to give my conclusions and continue when the Creators Update and the new Universal Examples on GitHub get released.


There is no way to analyze styles, transitions, etc. from the Live Visual Tree. might be in the future will appear a third party tool to analyze it. (In case you know how please share)

I am waiting new real documentation ‘Acrylic’ with personas, XAML lights, shadows, SvgImageSource, updated Compiled binding and many more. Might be on Feb 8 we get more information.

The GitHub repositories are stopped, most of them have 6 months old and composition repo 4 months, that means ages.

Paint 3D app is not using any internal SDK it is using the typical we use. it is a really outdated version comparing it to the release I think we will see in a near future. Might be when release the new SDK without being prerelease.

And that’s all not surprises but details, as always @juanpaexpedite

UWP Protect files embedding them

When developing apps you search for practical, tested and for real environments information. That is always my purpose, improve and go beyond in universal apps.

Let’s begin reading files in universal apps.

It is just two lines to read a file in your app and assign to an string, but might you do not know that you can go inside the folder of that app, navigate to the Assets folder and grab that file.

An UWP app should be a safe sandbox in both ways, one for the user to feel safe its Windows and on the other side for the developer, keeping the files safe.

In theory there is no limit about the size of the file to protect, can be any you consider, because the reader is asynchronous it can last how long it takes.

Text File

Suppose you have a json with few data, you prefer use json because it’s fast. If you place it at Assets/Data and the build options to Content, it will be available for any user at that path like C:\Program Files\WindowsApps\[AppName]_[Version]_[Platform]__[Id]

Content file

When you want to read or delete a text file with the build action as Content:

public static async Task<string> LoadContentTextFileAsync(string contenturi)
    var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(contenturi));

    return await FileIO.ReadTextAsync(file);

public static async Task<bool> DeleteContentFile(string contenturi)
    var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(contenturi));

    if (file != null)
        await file.DeleteAsync(StorageDeleteOption.PermanentDelete);
        return true;
    return false;

Now let’s change it to Embedded resource, and of course do not copy the file:


Take care, that if you have debugged the app before, you must uninstall it to make  disappear the file from Assets/Data.

The following methods makes really easy change from content to embedded resource.

public static Stream LoadEmbeddedStreamAsync(Type type, string contenturi)
    var assembly = type.GetTypeInfo().Assembly;
    var relativepath = ConvertContentEmbedded(contenturi);
    var embeddedpath = $"{type.Namespace}.{relativepath}";

    var stream = assembly.GetManifestResourceStream(embeddedpath);

    return stream;

public static async Task<string> LoadEmbeddedTextFileAsync(Type type, string contenturi)
    var stream = LoadEmbeddedStreamAsync(type, contenturi);

    return await ReadStringFromStreamAsync(stream);

What really means setting the file as embedded resource?

For one side we have added another entry to the resources.pri file (in case the file is in the project, in case is in a library it will be called [libraryname].pri.

To take a look to the file, just get the XML with the following VS tool:


And not just open it and find the entry of the file:


Aside: If you install a UWP SDK like the 15003 prerelease, this and other tools are unique, that means that you won’t be able to upload an appx, because this tool ‘makepri’ is not a released version, you will have to uninstall both SDKs, and install again the latest released one.

If I understand it right, the file is embedded in the executable, so in theory is really protected, taking a look to it, we see the change in the size:


We can check that easily adding an Image and setting it like a embedded resource:


It is clear where the file is embedded now. Now we understand we should not add big files in here because it will make increase the executable and decrease time loading and performance.

But what about adding it inside a UWP library?

Big Files

In this case, I am going to add an image inside a assets library and try to show in a Image Control.

To make things easier, create a class in the UWP library called Library and the project AssetsLibrary and also let’s add a file inside Images:


Now set the image as embedded resource and call it from the code behind of a page:

private async void Initialize()
    var stream = ResourceFilesService.LoadEmbeddedStreamAsync(typeof(Library),"ms-appx:///Images/spacebackground.jpg");

    var bitmapimage = new BitmapImage();

    BackgroundImage.Source = bitmapimage;

    await bitmapimage.SetSourceAsync(stream.AsRandomAccessStream());

Perfect the image is shown in the BackgroundImage control. So now you can implement behaviors or static methods for compiled binding to set the images you want to protect.

Big files to the local folder

Finally in case you need to copy a file from an embedded resource to the local folder, follow these steps:

public static async Task CopyResourceToLocal(Type type, string resourcepath, string filename)
    var localFolder = ApplicationData.Current.LocalFolder;
    var dbFile = await localFolder.TryGetItemAsync(filename) as StorageFile;

    if (null == dbFile)
        var stream = LoadEmbeddedStreamAsync(type, resourcepath);

        //Copy the stream
        var storageFile = await localFolder.CreateFileAsync(filename);

        using (var outputStream = await storageFile.OpenStreamForWriteAsync())
            await stream.CopyToAsync(outputStream);

For instance

 await ResourceFilesService.CopyResourceToLocal(typeof(Library),"ms-appx:///Data/Resource.txt","Local.txt");

And that’s all hope with this information, you can keep your app more robust avoiding possible user mistakes.

Download the ResourcesFileManager.cs

Take a look all I create about #UWP #Windows10 at @juanpaexpedite

Analyzing Paint 3D 1/2

Until we have the new Windows 10 Creators Update and the new SDKs, APIs, etc. I need few days to relax my mind from creating my new Universal app Games Time Machine. I learn a lot about performance, SQLite with EF7 and UI new ways. I encourage you to grab it at Games Time Machine at the W10 Store and ask me about any part you are interested, I will glad to address on how to solve an issue or how to make it work any you need.

Now after following the twitter from @justinxinliu I decided to analyze Paint 3D, in theory the most next Creators Update App style.


The first step is launch Paint 3D and now launch VS2017 (might be with 2015 works but you know is 2 years old now 🐱🐉 ), and attach in the following way:


Now search for Paint and attach in Native mode:


And here we go, now we can analyze several interesting parts of the app.

App Manifest

Just a quick view of what is interesting inside:


As you can see there is a Device called Windows.Team (no idea what can be). and an internal SDK 14800.

From the Uri rules, look like the codename was Denali which is a protected website:




The app contains:

  1. Grid with TopBar, SideBar, CommunityDiscoveryPanel, ContextSideBar, Grid, Rectangle, HamburgerMenu and a DebugMenu.
  2. A ContentControl binded to the StartViewModel.StartVM, might be a trigger to begin some kind of actions.
  3. The AboutBox, it is interesting because it’s full size, with a Brush Transparent (to lock all the elements behind). An small bug it has is that should block the key or the controls behind when the AboutBox is shown, but it’s not, you can press tab and cycle control focus and activate them. Hope in new releases they give an easier option to lock what is behind.paintfocus.JPG
  4. The HsvColorPicker, which I will analyze later.
  5. A Loading overlay, which must be like a MessageDialog (CancelCoomand, Description, Image, IsOpen, Title)
  6. A Change Text Overlay similar to the previous one, (CancelCommand, OkCommand, Text)
  7. A grid that contains the WebBlendControl, yes web. I will take a look to it later.

Top Bar

This bar if 50 Height, not 48, so is not now a x4 factor, the background color is #FF363941. I should try referencing an static resource to know if this value is hard coded or referenced.


It contains three parts, The hamburger, which is an ActionableCheckBox, a ResponsivePanel to change the ExpandedView and the CompressedView, and another Grid on the right for the Actions and Remix3D.

  1. The Hamburger ActionableCheckBox is 66×50 with minSize 66×50 and it comes from the style of contains and IsAction Property to change if the Menu is Open or not.
  2. The Responsive Panel (in expanded view) [I do not know if it is possible to analyze the Visual States]. To summarize is like an ItemsPanel with ItemsSource and SelectedItem. The ItemContainerStyle sets the size to 66×50 of each item.
    1. Each item is a SimpleSelectorItem that changes the visibility of a grid when selected or unselected, the only difference is a linearbackgroundbrush I will detail later.
  3. And finally on the right a non named panel, a bit less organize with a 66×66 button, yes is bigger, why? and also the other buttons are 66×66.

Side Bar


This bar contains a lot of controls inside, let’s analyze how are organize (hardcoded or with binding) and what kind of controls are. All inner panels are of type ResponsivePanel that changed from ExpandedView to CompressedView depending on the Window size.

It has two parts, the tool section, and the colors below. Let’s begin with the low part, the color selector, the container is a grid of 264W and inside it is an stack panel. The most interesting part is the colors section. It is a RelativePanel with a WrapPanel with all the Colors of type ColourThumb.


It changes the Visibility of the Grid, the over has -2 of margin and 2 of Border Thickness to make the effect of grow.

Now let’s analyze the tools section. each tool item is a canvas with several paths inside, might be in the future we see SVG items here.


In summary after digging in the visual tree, it’s a SwapChainPanel (HighFrecuencyInputPanel) , I will have to take a look if it’s the same like the InkCanvas.

Bottom Bar

This contains ZoomScale Buttons and buttons to change the view to edit or view.

Now we have analyzed the layout and itemsizes, let’s continue with the Icons used and fonts.

Icons & Fonts

One of the firsts parts I always take a look is the fonts and the symbols what are they done, pixel, paths, fonts, etc.

Let’s analyze the Top Bar:

The Hamburguer button is of type ActionableCheckBox, the content is an Icon with HamburgerIcon which is slightly different from the Seoe MDL2 Assets.

Now the middle top panel is of type PaintStudio..ResponsivePanel with popup values, Each button inside, is a PaintStudio..SimpleSelectorItem and the content is using this font Assets/Fonts/PaintA.ttf#paint and the chars are B, ~, and so on, so apparently are not a new Segoe Creators Update Font.

Let’s see if we can achieve that font. The app is installed in a place like:

C:\Program Files\WindowsApps\Microsoft.MSPaint_1.1612.14017.0_x64__8wekyb3d8bbwe

And here we can see inside the Assets Folder three fonts: Icons.ttf, BhaiMDL2.1.84.ttf and PaintA.ttf


This font contains the following information:


Generated by IcoMoon, interesting, isn’t it?. And it just contains 3 characters:


Beihai MDL

This name looks like the Creators Update internal name, later I will explain why. This second one is from Microsoft and is an small subset from Segoe MDL2 Assets:


As you can see in the screenshot, containing the whole collection, it contains a new facebook and twitter symbols which, I think are not in Segoe MDL2  Assets.


Now let’s take a look to the PaintA.ttf


All the screenshots were using my app Universal Character Map . except the first one, using FontForge desktop app (great for editing fonts). As you can see here is where includes a Hamburger symbol. I do not understand why is not the same from Segoe, might be in the Creators Update all will be reorganized. Also all the icons included in the Hamburger menu were done using this font.

For the rest of the menu items, all are custom controls. Hope they are included by default or in templates to stylish new apps.

Colors & Gradients

All the menus, all the icons, etc. have the following gradient:


It looks like the colors do not belong to an Style (static resource) but might be included in the future for default styles in UWP apps.

In the following post, I will analyze the controls, all the coloring and shadows, and I will try to dig about visualstates and animations if it’s possible. Meanwhile the other laptop is to 15014, I will check if there is any new version of Paint3D or any other app to analyze.

Regards @juanpaexpedite


Compiled binding,Page Resources and Visual States

I have tried to find the cleanest way in terms of reusability, less code repeating, functionality, etc. And after plenty of experiments the following is the one I consider more interesting. First I explain how to use directly from the page, and after from a datatemplate.

Page Resources

When we define a double in XAML like a resource, you will be able to use as a resource just once, also you will able to change on runtime using the VisualStateTriggers, but the Controls referenced to it won’t get the updates, because we only have StaticResources in UWP and no DynamicResources. Also a x:Double cannot have a Name in the Page Resources Section.

Having this in mind, you can define tons of dependency properties in your XAML Page code behind and bind it but makes the code less clean. So what can we do, let’s create XAML Properties.

To begin let’s define the DoubleProperty which represents a double in the XAML world, that means a DependencyObject:

public class DoubleProperty : DependencyObject
        public double Value
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }

        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register(nameof(Value), typeof(double), typeof(DoubleProperty),
                new PropertyMetadata(DependencyProperty.UnsetValue));

Now we can use it as a real resource because now can have a name in the Page Resources.

        <c:DoubleProperty x:Name="HeaderFontSize" x:Key="HeaderFontSize" Value="24.0"/>
        <c:DoubleProperty x:Name="DescriptionFontSize" x:Key="DescriptionFontSize" Value="14.0"/>

Compiled binding

Now in case we want to create a TextBlock with one of the defined font sizes:

<TextBlock Text="Sections"  FontSize="{x:Bind HeaderFontSize.Value, Mode=OneWay}" />

Visual States

And now let’s create the Visual States Section

    <VisualStateGroup x:Name="VisualStates" >
        <VisualState x:Name="Full">
                <AdaptiveTrigger MinWindowWidth="600" />
        <VisualState x:Name="Small">
                <AdaptiveTrigger MinWindowWidth="0" />
                <Setter Target="DescriptionFontSize.Value" Value="12"/>
                <Setter Target="HeaderFontSize.Value" Value="18"/>

Where we can easily change the values because this resources have x:Name. Now when you run the app you will see how it adapts the fontsize according to the Windows Width.

Now, the WOW part, at least IMHO, because there is not an official way to do it at the moment.

Data Templates

First we need to define a Current static property of the Page in the constructor, it is the only code behind you need:

public static HomeView Current { get; set; }
public HomeView()
    Current = this;

Now we can bind to it from a DataTemplate for instance:

<DataTemplate x:Key="SampleDataTemplate" x:DataType="m:SectionInfo">
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="240"/>
    <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontSize="{x:Bind local:HomeView.Current.HeaderFontSize.Value, Mode=OneWay}"  />
    <TextBlock Grid.Row="1" Text="{x:Bind Description, Mode=OneWay}" FontSize="{x:Bind local:HomeView.Current.DescriptionFontSize.Value, Mode=OneWay}" />

So now with this we can bind double values and get their updates on the go, and if we have values, can we have any other type. Why not a generic object, let’s continue defining GeneryProperty:

public class GenericProperty : DependencyObject
    public object Value
        get { return (object)GetValue(ValueProperty); }
        set { SetValue(ValueProperty, value); }

    public static readonly DependencyProperty ValueProperty =
        DependencyProperty.Register(nameof(Value), typeof(object), typeof(GenericProperty), 
            new PropertyMetadata(DependencyProperty.UnsetValue));

In the page resources section let’s add a Brush:

<c:GenericProperty x:Name="CustomColor" x:Key="CustomColor">
      <SolidColorBrush Color="Blue"/>

And in the Visual States Section:

    <VisualStateGroup x:Name="VisualStates" >
        <VisualState x:Name="Full">
                <AdaptiveTrigger MinWindowWidth="600" />
                <VisualState x:Name="Small">
                        <AdaptiveTrigger MinWindowWidth="0" />
                        <Setter Target="DescriptionFontSize.Value" Value="12"/>
                        <Setter Target="HeaderFontSize.Value" Value="18"/>
                        <Setter Target="CustomColor.Value">
                                <SolidColorBrush Color="Orange"/>

And finally, having casting in compiled binding, we can do the following:

<Grid  Background="{x:Bind (Brush)local:HomeView.Current.CustomColor.Value, Mode=OneWay}" >

I have tested this with the latest insider release 14905, I understand it works from the Anniversary Update.


This is just the beginning, now we have methods and casting, we can make practically everything directly from XAML just adding that Current property. I think this article solves plenty of questions about DynamicResources, how to bind a resource, etc.

You can get the source here CompiledBindingExamples

Hope you find it useful and as always follow me at @juanpaexpedite to know interesting UWP stuff. Now I am preparing a new dev oriented App I hope finish it in few weeks.

Images in Composition

I am developing my apps with more visual transitions, animations, etc. all managed in the Visual Layer, is really smoother than using XAML animations, there are no dependency properties and might be, you remember that animating some properties were not optimized.

To clarify adding images in Composition let’s explain the example I am achieving.

In my case I want to fade from Image to another Image, when I began to do this I uses the ArithmeticCompositeEffect with the following definition:

var effectDef = new ArithmeticCompositeEffect
                Name = "effect",
                ClampOutput = false,
                MultiplyAmount = 0,
                Source1Amount = 1,
                Source2Amount = 0,
                Source1 = new CompositionEffectSourceParameter("ImageSource"),
                Source2 = new CompositionEffectSourceParameter("Source2")

And it works really well like in the ‘Finding Dory’ tweets I did. So I decided to follow that way, when is showing one of the Images I could update the other one with other Uri/File source and animate again. But it makes a disgusting flickering I think you cannot avoid.

The only way to do this is extracting the base of the CompositionImage class from the SamplesCommon project and set two SpriteVisuals in a ContainerVisual and animate the Opacity of each.

So I decided to make a diagram of all the flow in there, to understand what is happening, because meanwhile the Composition API is final, it has been changing the way of the Images and other sources are obtained.

In this case I want to set an Image in the Visual of a custom class that inherits from control:


The steps to set a Visual in the Element are the following were you will need the SamplesCommon source project reference:

  1. Gain access to the Visual Layer (Composition) by calling the GetElementVisual of static ElementCompositionPreview.
  2. From the compositor of the Visual create an SpriteVisual and a SurfaceBrush.
    1. The SpriteVisual will be the Child of the Control Visual.
    2. The SurfaceBrush will be brush that fills the SpriteVisual (like ImageBrush in the Background of a Grid in XAML)
  3. Create a CompositionDrawingSurface using SurfaceLoader Helper
  4. Set that surface to the SurfaceBrush previously created.
  5. Set the SurfaceBrush as Brush of the SpriteVisual.
  6. Set the Child Visual of the Visual by calling SetChildElementVisual of the static ElementCompositionPreview.

It might appear a bit complex, but what it really means is you have a lot of control of what to do. For instance (I have not tried it yet) you have access to a DrawingSession that means you can make a lot of geometric and drawing operations in that step, might be even use Win2D effects (I have to check that and also if is a transparent session)

This Surface ‘Image’ brush of the SpriteVisual is one of you can set, you can take a look more options in here:

Also you have now the composition properties of the Visual and the ‘Child’ SpriteVisual and you can animate all of them smooth, which is really important.

And the SurfaceBrush has properties like the XAML ImageBrush like alignments, stretch, etc. which make the things easier to work with.

Hope this makes easier to understand the flow of the Visual Layer and how interoperates with Win2D objects. As always @juanpaexpedite





Bonobo Git Server and Visual Studio 2015


EN: I always wanted to create a private Git repository and after test my first commit from Visual Studio here I attach a guide I hope make it an easy walkthrough to configure it: gitlocal_en

ES: Siempre he querido crear un repositorio privado de Git y después de mi primer commit con el desde Visual Studio adjunto aquí una guía que espero que te haga el camino más fácil para configurarlo.gitlocal_sp

Win2D Particles

One of the apps I am preparing has a particles adornment, I made the first version ‘solve version’ and now I have implemented the ‘code version’.


The CanvasAnimatedControl

This Win2D Control is like having XNA in UWP apps, you can subscribe the following events:

private void Initialize()
    MainCanvas.CreateResources += MainCanvas_CreateResources;
    MainCanvas.SizeChanged += MainCanvas_SizeChanged;
    MainCanvas.Update += MainCanvas_Update;
    MainCanvas.Draw += MainCanvas_Draw;

Where CreateResources is where you generate and download all the source images you will need in the other events. SizeChanged is just the base event to keep the bounds, Update is when you modify the position and effect of the particles, and finally the Draw event when you paint each particle in the control.

Particles Generator

Basically it has the following structure:

  1. Create the textures (small circles with blur)
  2. Create a List of particles at different positions.
  3. Add displacement with turbulente effect per particle. (turbulence gives more natural effect)
  4. Update Turbulence

And then draw the result each time.

Creating the Textures

In order to use only Win2D, I created 4 bitmaps (CanvasRenderTarget) of different sizes with a chained painting session where:

  1. Paint two circles in a canvas
  2. Apply blur effect to the previous canvas.
using (CanvasDrawingSession targetSession = canvas.CreateDrawingSession())
    targetSession.FillCircle(center, nextRadius, outerColor);
    targetSession.FillCircle(center, nextRadius - 6, innerColor);
var blurEffect = new GaussianBlurEffect() { BlurAmount = 2f };
CanvasRenderTarget blurredcanvas = new CanvasRenderTarget(device, viewportsize, viewportsize, parent.Dpi);
blurEffect.Source = canvas;
using (CanvasDrawingSession targetSession = blurredcanvas.CreateDrawingSession())

Each of these bitmaps will be used as sources of every particle drawing, which has a displacement with turbulence effect, when you apply this effect you must create a big viewport, 100 px in this case, because is drawn the original image and the displacement image, so to avoid this just create this safety viewport.

Decrease ‘float viewportsize = 100;’ if you want to watch the weird result.

Creating the Particles

Now we have the images let’s create the particles, you have to consider the window bounds and the size changes. I added a random orientation for each particle and if you want only falling particles:

public void CreateParticles(bool fall)
    particles = new List<Particle>();

    int i = -1;
    int minpos = minRadius * sizes * 2;
    while (++i < amountparticles)
        var x = generator.Next(minpos, (int)bounds.Width);
        var y = generator.Next(minpos, (int)bounds.Height);
        var s = generator.Next(0, sizes);
        var ox = generator.NextDouble() > 0.5 ? 1 : -1;
        var oy = fall ? 1 : generator.NextDouble() > 0.5 ? 1 : -1;

        var particle = new Particle(x, y,s,ox,oy, particleBitmaps[s], particlefall:fall);

As you see is just creating a list with random values for each property. In the constructor of each particle I add the effects.

Displacement with turbulence

random = generator.Next(2, 50);
factor = 0.7f * random / 10.0f;
var octaves = generator.Next(1, 5);
turbulence = new Transform2DEffect() { Source = new TurbulenceEffect() { Octaves = octaves } };
displacement = new DisplacementMapEffect() { Source = source, Displacement = turbulence };

The idea of the displacement is to displace and deform the particle according to the turbulence effect. If you want to see what is the turbulence, in the drawing session, draw the turbulence effect instead the displacement.

Update the turbulence

Now we have the turbulence created we have to move the particle around it is position using the following turbulence which also deforms the particle:

private void UpdateTurbulence(float elapsedTime)
    TurbulenceMatrix = Matrix3x2.CreateTranslation((float)Math.Cos(elapsedTime + random) * 2 - 2, (float)Math.Sin(elapsedTime) * 2 - 2);
    turbulence.TransformMatrix = TurbulenceMatrix;
    displacement.Amount = (float)Math.Sin(elapsedTime * factor) * random;

It is relative simple to create this environment, I have to recognize that in my 1320 goes slow, but in desktop works really well, I cannot assure is because the displacement effect, might be reducing the update times could be great so I let you go and test it.

I hope you enjoy the article and take the idea about how to create images/textures in Win2D and then apply to a CanvasAnimatedControl like in the XNA old ages so simplifies the code a lot.

And as always you have the code in the Particles2D project of my repo : Github

Follow me to know the latest code about Windows10 @juanpaexpedite