Layout is another big can of worms in UWP application development, but having spent far too much time on keyboard navigation I'm postponing the big lessons until later. Today I'm going to learn just enough to get what I want on screen.

The first is controlling that shape I drew earlier. By default simple shapes (Ellipse, Rectangle, etc) dynamically adjusts to layout size, but there doesn't seem to be a way to specify complex shapes that would be similarly dynamic. They are specified via X,Y coordinates and I didn't find a way to specify "X is 25% of ActualWidth" in markup.

The fallback is to listen to SizeChanged event and recalculate coordinates based on ActualHeight and ActualWidth. I get my little camera preview overlay graphics on screen, but that's only the start. I wanted to draw other on screen directional controls to augment the arrow keys.

While working to position the shape and on screen controls, I ran into a frustrating problem: there are two different ways to specify an on screen color for rendering. We have Windows.UI.Color and then we have an entirely different System.Drawing.Color. I'm sure there's a good explanation on the history here, but right now it's just annoying to have the "Color" class be ambiguous.

Rendering the user controls outside of camera got a tiny bit tricker, because now I have to track what happens when, including when an element is loaded for me to kick off other events relating to serial communication. Thanks to this Stack Overflow thread, I learned there are three different candidates depending on need. There's Loaded, or LayoutUpdated, or SizeChanged. And people are constantly surprised when one of them does something unexpected, it seems like none of the three does exactly what people would want. This is just one of many parts making UWP layout confusing.

When I added controls by hand, they were fully adjacent to each other with no space in between them. I knew I needed to specify either a margin, or a padding, but couldn't figure out which is which. I still don't... they do slightly different things under different circumstances. To ensure elements inside a grid don't butt up against each other, I have to use Padding. To ensure the video preview doesn't butt up against edge of the window frame, I have to use Margin. I have yet to build an intuition on which is the right tool for the job, which I hope will come with practice.

But never mind little layout details... I have my G-code controlled camera, and I want to know if it works like I wanted. (Spoiler: it didn't.)