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.

Windows Accent Colours

In a new app concept I’m prototyping, I wanted to allow the user to select a colour for each main item which would effect the heading background colour.

Like this: (note; this is the end result)

Having done similar years ago, I remember the accessibility/legibility concerns this gave me. Allowing your customers to pick any colour they want is not ideal;

If you go completely free form (a full colour picker) then you hit the following problems:

  • Ease of use suffers compared to a quick pick list.
  • Present too many choices (decision fatigue).
  • Many shades (very light and very dark) make it difficult to read and see UI elements.
  • Some colours should absolutely not be offered (Black when the text is black, for example.

Effectively you are giving the users more work and at the same time a rope with which to hang themselves (Even if a colour is OK today, what happens when the theme changes?)

So, options?

Windows gives a list of ‘named’ colours. So how about that?

Well, it also doesn’t guarantee accessibility or contrast. They’re a list of general use colours, not a curated list for this purpose.

If only someone had spent mega dollars researching and building a list that can be relied upon?

Enter Microsoft.

Their Accent Colours serve effectively this exact purpose. Yay!

So I went hunting for an API or enumeration of them. I was aghast to find that one doesn’t seem to exist. Not even a list. I could get the current theme accent, but not them all.

Having spent a few days on and off looking and asking every learned person I could get my hands on, I final gave in and did it the brute force way. In fairness; this possibility was obvious days earlier but I refused to accept I couldn’t do it smarter.

I opened the Windows Personalisation settings, took a snippet and used a colour picker in Paint.Net to get teh Hex values. With that info I used the hover tooltip in Settings to get the colour friendly names.

To save you the wasted time replicating this; here is my list of Windows accent colours!

“#FFB900”, “Yellow Gold”
“#FF8C00”, “Gold”
“#F7630C”, “Orange Bright”
“#CA5010”, “Orange Dark”
“#DA3B01”, “Rust”
“#EF6950”, “Pale Rust”
“#D13438”, “Brick Red”
“#FF4343”, “Mod Red”

“#E74856”, “Pale Red”
“#E81123”, “Red”
“#EA005E”, “Rose Bright”
“#C30052”, “Rose”
“#E3008C”, “Plum Light”
“#BF0077”, “Plum”
“#C239B3”, “Orchid Light”
“#9A0089”, “Orchid”

“#0078D7”, “Default Blue”
“#0063B1”, “Navy Blue”
“#8E8CD8”, “Purple Shadow”
“#6B69D6”, “Purple Shadow Dark”
“#8764B8”, “Iris Pastel”
“#744DA9”, “Iris Spring”
“#B146C2”, “Violet Red Light”
“#881798”, “Violet Red”

“#0099BC”, “Cool Blue Bright”
“#2D7D9A”, “Cool Blue”
“#00B7C3”, “Seafoam”
“#038387”, “Seafoam Team”
“#00B294”, “Mint Light”
“#018574”, “Mint Dark”
“#00CC6A”, “Turf Green”
“#10893E”, “Sport Green”

“#7A7574”, “Gray”
“#5D5A58”, “Gray Brown”
“#68768A”, “Steel Blue”
“#515C6B”, “Metal Blue”
“#567C73”, “Pale Moss”
“#486860”, “Moss”
“#498205”, “Meadow Green”
“#107C10”, “Green”

“#767676”, “Overcast”
“#4C4A48”, “Storm”
“#69797E”, “Blue Gray”
“#4A5459”, “Gray Dark”
“#647C64”, “Liddy Green”
“#525E54”, “Sage”
“#847545”, “Camouflage Desert”
“#7E735F”, “Camouflage”

…listed in groups of 5 representing the horizontal rows in the settings picker.

Is it perfect? No. it wold be better if I could check the Accent-Background colours, but beggars can’t be choosers.

If you spot any errors, let me know.

Enjoy!
Rob.

FlipView SelectedItem binding

For what ever reason, I’ve just lost some hours working around an issue with FlipView on Windows 10 ARM.
In the hope of saving you some time, lets take a walk through it together.
Consider this basic example:
<FlipView
  Name=”fv_Items”
  DataContext=”{Binding MyDataCollection}”
  ItemSource=”{Binding Items}”
  SelectedItem=”{Binding Current, mode=TwoWay}”>
</FlipView>
Assuming you have an object (MyDataCollection) with an ObservableCollection (Items) and a Current property, you’d expect this to just work.  And you’d be right!
…Unless you’re on ARM.
On ARM it looks like the SelectedItem is ignored.  On closer inspection the FlipView is actually overwriting it.  First with the correct value, then with null, then again to the 0 item in the collection…
To work around this (I’m uncomfortable calling this a “fix”) you can set the SelectedItem binding in code behind after the loaded event fires which would otherwise screw everything up.
First, remove the SelectedItem Binding from your FlipView XML.
Now, add a Loaded event handler to the FlipView, and add the following code:
Binding b = new Binding();
b.Mode = BindingMode.TwoWay;
var p = new PropertyPath(“Current”);
b.Path = p;
fv_Items.SetBinding(FlipView.SelectedItemProperty, b);
This works because the FlipView is trying to set itself to the 0 item, regardless of what you say, and overwrites your property value in the process.
In this method, you are not setting the SelectedItem binding until after that tom-foolery is completed.
Cheers,
Rob.