Example; sweeping light source in UWP

What it looks like, in Kanban Ink

I was asked on Twitter how I got this effect, here is the code I use.

In this example, the target FrameworkElement is a TextBlock.

Note: I feel really bad as I cannot take credit for writing this, but I cannot remember for the life of me where I found it! If you know, please let me know so I can credit properly.

private void StartShimmerOnLoadingControl()
{
             //get interop compositor
             _compositor = elementCompositionPreview.GetElementVisual(tbLoadingText).Compositor;//get interop visual for XAML TextBlock
        var text = ElementCompositionPreview.GetElementVisual(tbLoadingText);

        _pointLight = _compositor.CreatePointLight();
        _pointLight.Color = Colors.LightGray;
        _pointLight.CoordinateSpace = text; //set up co-ordinate space for offset
        _pointLight.Targets.Add(text); //target XAML TextBlock

        //starts out to the left; vertically centered; light's z-offset is related to fontsize
        _pointLight.Offset = new Vector3(-(float)tbLoadingText.ActualWidth, (float)tbLoadingText.ActualHeight / 2, (float)tbLoadingText.FontSize);

        //simple offset.X animation that runs forever
        var animation = _compositor.CreateScalarKeyFrameAnimation();
        animation.InsertKeyFrame(1, 2 * (float)tbLoadingText.MinWidth);
        animation.Duration = TimeSpan.FromSeconds(3f);
        animation.IterationBehavior = AnimationIterationBehavior.Forever;

        _pointLight.StartAnimation("Offset.X", animation);
    }

    private Compositor _compositor;
    private PointLight _pointLight;

Edit: I remembered the source! It is in the Windows Composition Samples

Horizontal Gradient Colour Picker

I needed this week, a particular kind of colour picker.  I couldn’t find one so I made one.

I tried using a gradient background, but was unable to find a way to pick the tapped colour out of it, even though I could get the POINT co-ordinate.

Instead, I had to do it like this.

It isn’t a custom control, just a usercontrol so I can re-use it.

It’s a Image of the gradient, and in the background it holds the original image as a WriteableBitmapEX.

On the right is a grid with the background set to the colour selected.

On the Tap event I got the position of the tap along with the width of the visible image control (as it could stretch with the users screen).

Then I bilinear resize the background image to match the visible image and grab the pixel from the tap events position. Push it back into the property and ta-da!

It’s now getting some further work (stop the image from resampling resampling if the image hasn’t resized (speed and avoid loss of quality) and it would be great if it set the colour while holding so you could drag a finger/cursor and see the color change without lifting).  But this first iteration was interesting so I wanted to share.

I should note; this binds to a string property.

Product Hunt

As a side project, I have almost finished building a Product Hunt client for Windows Store.

Hopefully the first beta submission gets through store approval in the next day or so, then I can start closed testing.

Further; I’ve applied to Product Hunt to see If they’ll permit me to get write access also to their API so the app can up-vote, comment and maybe even post. (Normally their API is read-only, but as they don’t have an official Windows Store app maybe they’ll make an exception???  Win-win)

Fingers crossed…

Rob.

In the Lab: Voyer (downloads and more)

Currently completed for the next release of Voyer:

UI:

  • Green Text: as requested Green Text is an integral part of 4chan, so I have finished setting the colour coding in comment text as appropriate.
  • Fixed issue where if a thread doesn’t load, it might not refresh either. Now it can tell there was an issue and re-try.

Downloads:

  • Faster Downloads: When saving WEBM video, Voyer will now first check if it has cached the file and if so copy it to your save folder.  If it doesn’t already exist in cache then it will download it as normal.
  • Better Download Naming: Downloaded files were named after the Reply Number, now they are (correctly) named with the same file name as the original.
  • Improved Download UI: Now when downloading a WEBM, the thinking and thumbnail image no longer interrupt your viewing and it downloads in the background giving a toast notification when finished.
  • Improved Download All: Like individual downloads, when you press Download All, you are no longer required to wait for the downloads to finish.  They happen in the background (with Toast notifications on each completion) even if you navigate to a different thread or board!

More to come for the next release at the end of this month,

Chao!
Rob.