Author: mareinsula

Desktop Color Information App

(Update: Now with Alt+T supports Top Most Window ON/OFF)

This desktop app is a tool to get information about colors while you move the cursor and capturing pressing control. Works in multiple monitor configuration and shows an approximation of the name based in the Hue value:

(Contrast ratio values are also working)


Keep control down to capture colors and press shift to pause capturing.


Checksum information
Size: 20920 bytes (0 MB)

In progress SVG tools pack app

This post is simply to show to animations and renders in pixel perfect about a tool I am preparing

(4th Update: Fills and non-filled strokes) I have solved some issues and discovered Inkscape make child translations in fills so… I have to implement that. Here an example of Super Mario World I want to use it in Construct to check a minimap.


(3rd Update: Shaders, Now it is possible to add shaders I am creating like dithering and banding) Here it is the example of dithering, view at full size:


(2nd Update: ANIMATION, I was able to catch the transformations in SVG groups and apply intervals to create animations, that can be saved in JSON (for instance) and be applied to different vector files) Just save the states for each animation and can be rendered with different resolutions from pixel art to HD.

Full size :


(Update: I had to add the tentacle just to see how it cool looks, on the right original, on the left traced from )

link to the gif:




What do you think, will help for developers, designers @juanpaexpedite

Windows 10 IoT 15043, First Impressions

The Windows 10 IoT 15043 Insider Preview is awesome, it was released about a month ago, but I have no time to test it until now and because I have not seen any screenshot about the new device portal and information about the release, I think is a must show the news :


First impressions

The wireless adapter does not work pretty well, so I decided to continue via Ethernet (might be is an issue in my configuration).

Now a few interesting screenshots from different sections including a paired device in the Bluetooth section. Later I will test if it works.

This slideshow requires JavaScript.

Now let’s deploy the Games Time Machine store package into the great Raspberry Pi 3:

installing.JPG Adding the dependencies and the certificate from the [AppName]_test folder works great. Before launching the app change the resolution from the device portal and restart the RPI3.

Ouch, when I restarted appeared a rainbow gradient filling the screen, then changed to green vertical gradients. So I had to set up the device again, at least the IoT Dashboard saved the 15043 ISO. I also tried 800×600 and it crashes.

Games Time Machine

Before trying to change the resolution, I launched the app, and the animated logo screen worked pretty well, the lines moved correctly but Win2D animations are not working for the shadows.

Just to test how it works the app in a better resolution, I installed the W10 IoT 14393, it’s a huge improvement, so big that Games Time Machine crashes in 14393.


So let’s go back to the 15043 and check if it is possible to set a higher resolution.


If we take a look to the 14393 EFIESP, there is a file called config.txt and I set to 1024×768, I did not found that value, but might be the hdmi_mode=16.


Let’s reinstall the 15043 and check the changes, now the appearance is really more professional:

# For more options and information see
# Some settings may impact device functionality. See link above for details
# GPU Firmware SHA256 checksum: 7CE2EF13CDD77F1782FFFF98533572503DF4B46765966CC7E18F6C6455B9623A
# kernel.img SHA256 checksum: 6C82C8720BE4EFB2951BDC01FA187B0B659227033EB7D7DB5ACA6324FD644D7F
# kernel.img git commit ID: f6706f4bd3b10c8294589f45082c8bdc4c50be59

# Boot
init_uart_clock=16000000    # Set UART clock to 16Mhz
kernel_old=1                # Load kernel.img at physical memory address 0x0
safe_mode_gpio=8            # A temp firmware limitation workaround
max_usb_current=1           # Enable maximum usb current

# Memory
gpu_mem=32                  # Set VC to 32MB, ARM DRAM to (1008-32)MB
hdmi_force_hotplug=1        # Enable HDMI display even if it is not connected (640x480)

# Overclocking
core_freq=250               # Frequency of GPU processor core in MHz

# Video
framebuffer_ignore_alpha=1  # Ignore the alpha channel for Windows.
framebuffer_swap=1          # Set the frame buffer to be Windows BGR compatible.
disable_overscan=1          # Disable overscan
hdmi_group=2                # Use VESA Display Mode Timing over CEA
hdmi_cvt 800 480 60 6 0 0 0 # Add custom 800x480 resolution (group 2 mode 87)

The correct link  is the following: raspberry configuration. and information about the video configuration here. There you see the parameter hdmi_mode=16 is the same I set in the 14393 release, so let’s remove hdmi_cvt and add that mode…..🐱‍👤

It is running! It took a loooong time until the ‘Welcome to Windows 10 IoT Core’ appeared (and more after reinstalling it N times since I began the post.) Here the screenshot:



I was not able to make the app pass the splash screen using the package I sent to the store, so I decided to avoid the intro page, the ads, and debug directly to the platforms. After a while copying files…🐱‍👓…and installing missing frameworks…finally!

Now we have a better resolution, let’s deploy GamesTimeMachine again and test music, video, screenshots, animations, etc.

The animation of the platform selected was made using Win2D and it is working pretty well. I really love Windows 10 IoT on the Raspberry Pi 3 when are friends:

The full size gallery goes pretty smooth, the music plays fine (using the wired headphones, the HDMI neither the Bluetooth headphones are working), and the TV mode works!! so it has the gallery playing with the music and the voice talking about the game, with smooth transitions!

Trying to play a video make it crash and appear the BSOD, so it might be because the Codecs, who knows, in the future when we have some documentation we will be able to know how to proceed.

Now I will set the app in TV mode, just to listen a bit of Zelda and remember the first games.

Interesting article? Donate on the right, it is pretty easier than finding the configuration of video to make the Pi3 do not crash :).

More cool posts soon @juanpaexpedite and of course you can grab Games Time Machine from the Store.

And a last note, I tried to install both releases in my new Raspberry Pi Zero W v1.1 but it did not work. I will search for more info what we can do for that amazing miniature.










NET Standard Mobile LOB: Prism, EFCore Sqlite and Validation UWP [1]


My first idea was creating the environment with Xamarin but at the moment you cannot compile .NET Standard with Xamarin Forms, I will update the articles when the bugs go away.

Until then I decided to create an NET Standard library that in a near future will be the same for the Xamarin Forms project.

This article makes me really happy because it has been a long way until here, and when NET Standard 2.0 get released our C# world will enter in a new dimension, I assure that.


At the moment if you are in the world of PCL, and if you have tried to do something with Entity Framework Core Sqlite (EFCSqlite), its development goes directly to NET Standard without having a PCL release. So its being developed for the future.

So the option is right clear for the LOB project, create a NET Standard library that has to contain EFCoreSqlite, Prism.Core, Prism.Windows and System.ComponentModel.Annotations all working together.

And what we do it now? NET Standard 1.4 is the recommended version to use with UWP projects until the release of the 2.0. and with a magic tricks I will show you next you can mix all those libraries in one place.

New solution

Let’s create a new UWP project using .NET Framework 4.6.1:


I always use 14393 for UWP on both target and min, but in theory you can use the option you need.

Now let’s create the LOB .NET Standard library:


Now comes the first trick, adding fallbacks to .NET Standard to allow adding .NET PCL ‘specific’ libraries.

Unload the Marketing.LOB project and edit the csproj, add the fallbacks like the following:

<Project Sdk="Microsoft.NET.Sdk">



If you want you can download from the Nuget library the latest versions or add below the Property Group section, another section:

    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="1.1.1" />
    <PackageReference Include="Prism.Core" Version="6.2.0" />
    <PackageReference Include="Prism.Windows" Version="6.0.2" />
    <PackageReference Include="System.ComponentModel.Annotations" Version="4.3.0" />

And now compile and it works!. Great


Let’s create a Client really basic model in properties but cool in implementation, create a folder Models in the LOB project and the class Client:

 public class Client : ValidatableBindableBase
        #region Properties
        public int ClientId { get; set; }

        private string name;
        [Required(AllowEmptyStrings = false, ErrorMessage = "NotEmpty")]
        public string Name
            get { return name; }
                SetProperty(ref name, value);

        private string details;
        public string Details
            get { return details; }
            set { SetProperty(ref details, value); }

see that? It is a Prism ValidatableBindableBase with ComponentModel DataAnontations cool! And as you can see I set the Id to ClientId to be automatic with EFCSqlite for the following article.


I have made an effort to keep it pretty simple, create a ViewModels folder in the LOB project and here are the needs of the implementation:

  • Is Loading field (avoids need to validate and show for instance ‘NotEmpty’ in required field textblock).
  • Property Error Event handler to refresh the validation.
  • a Create Command to create the client using EF.
  • a validation method ‘CanCreate’ that checks if it is loading and errors.
public class ClientFormViewModel : BindableBase
        #region Properties and Fields
        public Client Client { get; set; }

        public DelegateCommand Create { get;  }

        private bool isloading = true;

        #region Constructor
        public ClientFormViewModel()
            Client = new Client();
            Create = new DelegateCommand(CreateClient, CanCreate);
            Client.PropertyChanged += Client_PropertyChanged;
            Client.ErrorsChanged += Client_ErrorsChanged;

        #region Validation
        private void Client_ErrorsChanged(object sender, DataErrorsChangedEventArgs e)

        private void Client_PropertyChanged(object sender, PropertyChangedEventArgs e)

        private bool CanCreate()
            if (isloading)
                isloading = false;
                return false;

            return Client.Errors.Errors.Count == 0;

        private void CreateClient()
            //To be continue in the next post


Now the validation is linked to the canexecute property of the Create Command.


Add the reference of the LOB project in the UWP project and create a folder Views and a Page ‘ClientFormView’.

In this case to simplify I add the viewmodel in the following way:

public sealed partial class ClientFormView : Page
        public ClientFormViewModel ViewModel { get; } = new ClientFormViewModel();

        public ClientFormView()
            this.DataContext = ViewModel;

Inside the Grid of the XAML the following stack panel:

 <StackPanel MaxWidth="360">
            <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="Client"/>
            <TextBox Header="Name" x:Name="ClientName" Text="{Binding Client.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            <TextBlock Text="{Binding Client.Errors[Name][0]}" Foreground="Red" HorizontalAlignment="Right" />

            <TextBox Header="Details" x:Name="ClientDetails" Text="{Binding Client.Description, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />

            <Button Command="{x:Bind ViewModel.Create}" Content="Create" HorizontalAlignment="Right" Margin="0,12,0,0"/>

Pretty simple and effective. Until compiled binding has features like not crashing when references are null I have to use classic binding.

Remove the MainPage and make the App rootframe navigate to the new View. Run it and test it writing some text (the button will be enabled) and now delete the text (the button will be disable and the error information will appear).

Here ends the first part of the article. In summary now we can use the standard libraries to make it work without need of workarounds.

In the next chapter I will explain the implementation of EF Core SQLite, creating the database and clients.

Hope you find the article fascinating as I see and if you want, on the right pane, you can donate for some coffee and tea.

Grab the source example from github-mark-64px

Know all about my progress at @juanpaexpedite, hope you enjoy the article.

UWP Grid view, 1st: the Tile Size


There is no documentation on how the tiles in the start menu and the start screen are rendered, we see them everyday and we create apps with tiles everywhere, but adjusting the size makes me every time doubt about what value should they have or how to find it.


To make the analysis, to know if the tile has a clip, is scaled, etc. I created the following png I used as the tile of an app:



To analyze the values of the tile sizes, I created screenshots from several desktops with different resolutions and I analyzed png mobile screenshots from different sources. After composing you have the following (always using no compression):


We realize that the tile is not clipped at all, it is always scaled. Also if you watch the screen with zoom you will appreciate the differences rendering the text, images, etc.

Interesting the tile size in desktop is always 100 real pixels in any resolution when the scale of the screen is 100%, and 125 real px in 125%. The logic is really easy to understand.

Now in mobile, we have 229 real pixels, where does this value come from?

Tile size in mobile

There are some basic rules that make appear this value:

  1. In this case we suppose the grid has 3 tiles width, each tile has Xt pixels.
  2. The base width for every mobile device is 360, all the sizes are multiple of that.
  3. The space on the sides (Xo) has to be bigger or equal to the space between tiles (Xi).

Applying the rules:


For a 360 width, the tile size (Xt) is 114, the space between (Xi) is 4 and Xo is 5.

A mobile phone with 720 pixels width is 2 times 360, that means double sizes, at least in theory, After making some screenshots and comparing you see there are some variations.

To finish this part, Here is the table with all the values I calculated for different mobile screen sizes:


The formula is pretty accurate and is valid to help us to calculate the tile size for the grid view I will describe in the following post, because it has some tricks than just the rule I show here.

Grab the full screen resolution PDF with all the data: Tile sizes PDF

Here is the end of the first part, now it is explained in detail, in the next post I will details the size for a tile in an app inside a GridView control and why not simply use a VariableSizedGridView, it implies performance, virtualization and more.

Enjoy the article? Tips welcome

More about the UWP world, tips and tricks soon, enjoy @juanpaexpedite

Wrap Lottie in UWP Apps

NOTE: This is an example on how to achieve showing Lottie examples in a webview. In the future I will make a library with animation methods, loading, configuration, etc.


What is all about?

The design of apps in Windows 10 it’s a bit Dark and Light world. At the beginning since Windows Phone 7 it was about performance and lack of resources and templates. All my icons were solid white in that age.

These days we can start using multicolor svg icons and also animations. The typical animations are about changing the opacity, position, scale, color but never the shape of an Element. In part is because it is not an easy work to do but there is an After Effects plugin+library that is the source of all this movement: Bodymovin

When I started to see flat animations vector based in several websites and after reading that were based on Bodymovin appeared to me Lottie which is a native version of this javascript library it get me a bet out of the game. The reason is because XAML is powerful but is not complete, it does not have the power to change shapes, grow lines, etc.

Testing Lottie files in Bodymovin

Lottie is only for Android and IOS, so in order to make it work in UWP the only way is make it work in a webview using Bodymovin, so first let’s get files.

There is a new website LottieFiles (I get to that with the issue Path animations from Tamás Deme)  containing the json animation files ready to work with Lottie. The first question here is are compatible, hopefully yes, at least the files I’ve tested.

Lottie Transparency

Now we have a file, for instance lottie logo json, I had to understand the logic of that file to make it transparent, first I make an screenshot and the color was RGB (0,209,193) after several trials I discovered the colors are written from 0 to 1, so 209/256 it is about 0.82 in this case the background is

  "ty": "fl",
  "fillEnabled": true,
  "c": { "k": [ 0, 0.82, 0.76, 1 ] },
  "o": { "k": 1 },
  "nm": "Fill 1"

Now to make it transparent I set the “0”: { “k” : 1 } to 0, easy to find, isn’t it?.

Html transparency and scrollbars

By default the Webview control make appear a vertical scrollbar and it is not transparent, to solve all that

<html style="width: 100%;height: 100%;overflow: hidden;">
<body style="background-color:transparent; margin: 0px;height: 100%;overflow: hidden;">

Take care of that, it might be useful for many situations.

The library

How do we place the Bodymovin library running on a UWP from the file. Well after several trials, I found you have to use ms-appx.web, but it was not working, so I was looking for a way to debug that. You can do that with the following:


If you set the debugger to Script, you can debug the Webview until you find the correct path, in this case:

 <script src="ms-appx-web:///Data/bodymovin.js"></script>

Where the file is content and copy always. with all of that adjustments, the code will look like:

<!DOCTYPE html>
<html style="width: 100%;height: 100%;overflow: hidden;">
    <script src="ms-appx-web:///Data/bodymovin.js"></script>
<body style="background-color:transparent; margin: 0px;height: 100%;overflow: hidden;">
<div style="width:100%;height:100%;background-color:transparent" id="bodymovin"></div>
        var animData = { container: document.getElementById('bodymovin'), renderer: 'svg', loop: true, autoplay: true, animationData: animationdata };
        var anim = bodymovin.loadAnimation(animData);

In next versions, I will make the code with configuration about when to start, looping, etc.

 The Webview

This part is piece of cake, what I did is replace the parameter in ‘animdata’ with the json. In theory is possible to read as src, but at the moment cannot make it work.

private async void InitializeLottie()
    var html = await BMManager.GetTemplate();
    var jsonuri = "ms-appx:///Data/lottie_logo_1.json";
    var data = await BMManager.ReadData(jsonuri);
    html = html.Replace("animationdata", data);
    WebView web = new WebView { DefaultBackgroundColor = Colors.Transparent };
    await Task.Delay(1000);

With that after loading the page you will have the cool animation on your app!.

So here is a base to add svg animations into a UWP app.

Next Steps

There are plenty of steps to do from here, testing more jsons, making Composition animations with the webview to view how it behaves (pixilation, flickering). Making a complete library with animation control, etc.

Source code

You can download and try the example:  github-mark-64px

In my case, I’m using Windows 10, 15031. If it works also in your mobile, please share if it works, thank you @juanpaexpedite

If you find it useful, help me to continue, Tips welcome, it really helps!

Paint 3D Dialog Box using Composition Shadow


After analyzing the Dialog Box from Paint 3D (DBP3), I decided to create one by myself. I think the DBP3 should use:

  1. The Content Dialog class instead of a custom one and trying to disable elements. It has appear and disappear transitions so it works pretty well.
  2. The Composition shadow instead 7 borders around the control.

The first thing we have to do is customize the parameters of the content dialog. To do that, you can find the file or just use UWP Technical guide:

(If you find the App useful consider about tapping the  menu – smile – remove ads, it really helps.)


With that you know what are the properties to change and ThemeResources to replace its values.


So now in the App.xaml:

            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush">#3111</SolidColorBrush>
                <Thickness x:Key="ContentDialogContentScrollViewerMargin">0</Thickness>
                <Thickness x:Key="ContentDialogPadding">0</Thickness>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Opacity="0.5">3EEE</SolidColorBrush>
                <Thickness x:Key="ContentDialogContentScrollViewerMargin">0</Thickness>
                <Thickness x:Key="ContentDialogPadding">0</Thickness>

Now in the Page we are, or here in App.xaml if you prefer, add the following style to override all paddings and margins:

<Style TargetType="ContentDialog" x:Key="PaintDialogBoxStyle" x:Name="PaintDialogBoxStyle">
        <Setter Property="Padding" Value="12"/>
        <Setter Property="MaxHeight" Value="400" />
        <Setter Property="MinHeight" Value="0" />
        <Setter Property="MaxWidth" Value="500" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FullSizeDesired" Value="False"/>
        <Setter Property="Background" Value="Transparent"/>


The dialog


Let’s create a UserControl or a Templated Control with the following XAML structure:

<Grid Width="492" Height="340" Background="Transparent">
    <Canvas x:Name="ShadowHost" Margin="18" Background="Transparent"/>
    <Grid x:Name="LayoutRoot"  Margin="20"  Background="#FFF0F2F3">
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="Auto"/>
        <Border BorderThickness="1" BorderBrush="{ThemeResource ContentDialogBorderBrush}" Grid.RowSpan="3"/>
        <Image Source="ms-appx:///Assets/Images/Paint_Logo_with_Trademark_ABOUT_POPUP.png" Height="80" VerticalAlignment="Top" Margin="0,42,0,0"/>
            <StackPanel Grid.Row="1" Margin="0,12,0,0">
                <HyperlinkButton Foreground="#FF4D4D75" Content="Contoso Software License Terms" FontSize="12" Padding="0" HorizontalAlignment="Center"/>
                <HyperlinkButton Foreground="#FF4D4D75" Content="Privacy Statement" FontSize="12" Padding="0" HorizontalAlignment="Center"/>
                <HyperlinkButton Foreground="#FF4D4D75" Content="Contoso Services Agreement" FontSize="12" Padding="0" HorizontalAlignment="Center"/>
                <TextBlock Foreground="#FF4D4D75" Text="1.1701.12017.0" FontSize="12" Padding="0" HorizontalAlignment="Center"/>
            <Button Click="CloseDialog" Grid.Row="2" Margin="0,0,0,24" Width="200" Content="OK" HorizontalAlignment="Center"/>

To explain the values:

  1. The original DBP3 has a size of 484×332 so to avoid adding many values I decided to set that size + 2×4 and the Margins 20 and 18 make the game to have the panel inside and the shadow outside.
  2. The rule of creating a Canvas for the host is based on the latest documentation from MSDN about The Visual Layer with XAML.
  3. To make easy the position of the button I decided to set it inside and avoid the buttons the DialogContent has.
  4. The rest is from the values the Visual Tree of Paint 3D.


We have to make transparent the rectangle that appears when a Content Dialog is shown and when the button is Clicked make it disappear.

Note: Clicked is for (keyboard enter, mouse click and touch tap), and Tapped is for (tapped and click).

public sealed partial class AboutElement : UserControl
        public AboutElement()

            this.Loading += AboutElement_Loading;
            this.Loaded += AboutElement_Loaded;

        private void AboutElement_Loading(FrameworkElement sender, object args)
            var popup = VisualTreeHelper.GetOpenPopups(Window.Current).FirstOrDefault(p=> p.Child is Rectangle);

            if(popup?.Child is Rectangle rectangle)
                rectangle.Fill = new SolidColorBrush(Colors.Transparent);

        private void AboutElement_Loaded(object sender, RoutedEventArgs e)

        private void InitializeDropShadow(UIElement shadowHost)
            Visual hostVisual = ElementCompositionPreview.GetElementVisual(shadowHost);
            Compositor compositor = hostVisual.Compositor;

            // Create a drop shadow
            var dropShadow = compositor.CreateDropShadow();
            dropShadow.Color = Color.FromArgb(128, 0, 0, 0);
            dropShadow.BlurRadius = 10.0f;
            dropShadow.Offset = new Vector3(0.0f);

            var shadowVisual = compositor.CreateSpriteVisual();
            shadowVisual.Shadow = dropShadow;

            ElementCompositionPreview.SetElementChildVisual(shadowHost, shadowVisual);

            // Make sure size of shadow host and shadow visual always stay in sync
            var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
            bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);

            shadowVisual.StartAnimation("Size", bindSizeAnimation);

        private void CloseDialog(object sender, RoutedEventArgs e)
            var popup = VisualTreeHelper.GetOpenPopups(Window.Current).FirstOrDefault(p => p.Child is ContentDialog);

            if (popup?.Child is ContentDialog dialog)



And finally to call it from a view:

private async void ShowDialog()
    var dialog = new ContentDialog { Content = new AboutElement(), Style = PaintDialogBoxStyle};
    await dialog.ShowAsync();

So with the existing API and without inventing new panels and controls, you can create the Dialog using the standard methods and not experiments like I explained in previous posts.

I prefer setting the border to transparent like the following, but it’s just my opinion:


Hope you find it useful, get ready for Feb 8, let’s see what happens.