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

Part 1, I am not your Guru

Avocado

Welcome to Project Avocado.

Yesterday I made the rash decision to make an app for Windows 10 and write about it in real time. From the very beginning of an idea right through to publishing in the Microsoft Store. (you know, provided it gets that far!)

Having made a poll on Twitter, it looks like there is some interest in the idea, so here goes!

I feel I need to warn you though, just so we are all on the same page:

  • If you’re looking for a perfect tutorial, this is not the project for you.
  • If you want to see ideal structure, this is not the project for you.
  • If you want beautiful code, this is not the project for you (in fact the code shown will be minimal)
  • If you want to hear the standard structures and even naming conventions, this is not the project for you.

I’m going to stuff this up. I’m not a super genius or MVP.

I get structures wrong, naming conventions incorrect and probably maul the syntax on a regular basis.

I’m almost certainly going to do something, and later realise that it is completely wrong and come back around and fix it.

In fact, as I am doing this from scratch (the only thing I have at the point of starting this journey is an idea) there is a very real chance that as I go through the ideation and discovery process I will decide the idea sucks and stop. Sorry in advance!

So, why am I even doing this? I am still asking myself that as I write this, but I have two primary reasons;

Firstly, I am getting asked for advice by other devs (they think I know what I’m doing!) many times the questions are similar. I can’t seem to organise what I want to say without context so a whole app approach probably makes sense.

End of the day I really want to give good advice and help people succeed.

Secondly; I saw another post by Becca Williams (@becca9941) who I LOVE to follow on Twitter about pushing past your own boundaries and comfort zone. I think this will help me grow as a dev and a person.

I am NOT doing this to push my own or other people’s products. I’m also not going to shy away from what I use though.

I hope to cover what I do first with an idea, from before you even know if it’s a decent idea or not. How to form some kind of MVP from the start, little tricks I may use, discuss monetisation and hopefully bring the product to fruition.

Thanks for reading and I hope you enjoy the ride! I’m super excited and super nervous to share this with you.

Rob,
Valley Software.

What you don’t know can’t *help* you part 2; Microsoft Store Badges

Welcome to part two of “you don’t know, what you don’t know”

(see part 1 here)

Today; lets work on user acquisition.

Which looks better?

This:

Get Kanban Ink for free, at the Microsoft Store here

or this:


I am no web developer, believe me. I’m also not best in class for UI design. So you’ll be SHOCKED to know I didn’t make that second one!

Microsoft have super simple web tools to make these for your apps in the Microsoft Store.

https://developer.microsoft.com/en-us/store/badges

All you need is your App ID (in Product Identity of Partner Center for your app) and it does the rest.

There are a couple or formats to select from. Go give them a look.

Until next time,
Rob.
Valley Software.

What you don’t know can’t *help* you part 1; Start your UWP app faster.

I thought I would fire up a few blog posts to spread some little easy win’s for UWP app developers.

Nothing ground breaking, but I’ve been reminded of an old problem;

…That you don’t know, what you don’t know.

So, what are some small, easy tricks we can use to make better apps?

First and foremost; no one wants to wait for an app to start. There are many ways for you to optimize you code (not too much in App.xaml.cs, load async, etc) but what if I could give you 1 line of code that could knock SECOND(S) from your startup time without any penalty of logic changes?

Too good to be true? Not at all. Enter the UWP Spash Screen.


Here, I am using my app KanbanInk as an example. In the first GIF, the normal app startup cycle. In the second, I’ve made the splash screen ‘optional’. This doesn’t mean it goes away, just that it doesn’t display for a minimum time any more (did you even know it did that? Cool, hey).

You can see it cuts a full second out of the startup time. All this without any changes to app logic. (I’ve trimmed the GIFs to be the first frame of startup, to the last frame of animation in)

The magic ingredient?


a:Optional="true" xmlns:a="http://schemas.microsoft.com/appx/manifest/uap/windows10/5"

You need to edit your manifest code (not in the GUI designer in Visual Studio) for this.

1) Right click on your app’s manifest in the solution explorer:

2) Add the line above into your element.

Boom; Your app will only how the Splash Screen for as long as it needs to, not a set minimum time.

Note; these tests were performed in debug mode. Full release packages would both be even faster.

The official documentation is here Microsoft docco