If you want positions, spacing and sizes look the same regardless of display aspect ratio, then there is definitely just one way: letterbox / pillarbox (perhaps covered with some background, but not with UI elements). As soon as you want the recognized density of UI elements over the entire screen being independent on the display aspect ratio, you need to free one or more of position, spacing, and/or size from above restriction.

There are 2 situations to look at: (1) a HUD during the gameplay time, and (2) a general GUI ("menu screen").

For (1) it is usually so that the "logical" locations center of screen, edges, and corners give a good anchor for placement.

IMHO, the most satisfying solution for (2) is to define a mean aspect ratio from the targeted platforms, and use that at the design choice. When running on a target platform, fit the designed size into the available display and scale both the positions and sizes accordingly to the factor calculated from fitting (this is one factor for both dimensions). To avoid the nasty black margins of letter-/pillarbox, just use an oversized background so that all pixels are covered. Doing so, on a 16:9 display there are small GUI-less areas left and right, and on a 4:3 display they are at the top and bottom.

So the way you get top-center in the equation is:

(res.x / 2) center in the x formula and the 0 in the y formula for top. So in my designer I'll have to make like a dropdown to select which the control should be anchored to.

Good call on the size formula. I guess at startup (or orientation change event for mobile) I'll calculate which one to use.

Have you considered positioning items relative to fixed anchors (bottom left, left center, top left, top center, etc.) and either

a) using distances/lengths defined relative to the minimum of the width and height of the screen

b) using area percentages instead of length percentages

You could also use the width/height and anchors defined by the appropriate safe areas for these

I'm using SimonForsman's method but I'm converting from pixels to units and units to pixels in my GUI editor. When I use TopLeft for the anchor the formulas he has to convert units to pixels works. The functionality I want is when the user changes the anchor I want the control to stay where it is, but recalc the units using the new anchor values in the formula. Below is what I have in my calc for anchor values but when I change the anchor the control doesn't get the right new units. What am I messing up with this?

switch (Anchor)
            {
                case Anchors.TopLeft:
                    p.X = 0;
                    p.Y = 0;
                    break;
                case Anchors.TopCenter:
                    p.X = (res.Width / 2);
                    p.Y = 0;
                    break;
                case Anchors.TopRight:
                    p.X = res.Width;
                    p.Y = 0;
                    break;
                case Anchors.RightCenter:
                    p.X = res.Width;
                    p.Y = (res.Height / 2);
                    break;
                case Anchors.BottomRight:
                    p.X = res.Width;
                    p.Y = res.Height;
                    break;
                case Anchors.BottomCenter:
                    p.X = (res.Width / 2);
                    p.Y = res.Height;
                    break;
                case Anchors.BottomLeft:
                    p.X = 0;
                    p.Y = res.Height;
                    break;
                case Anchors.LeftCenter:
                    p.X = 0;
                    p.Y = (res.Height / 2);
                    break;
                case Anchors.Center:
                    p.X = (res.Width / 2);
                    p.Y = (res.Height / 2);
                    break;
            }

When I use TopLeft for the anchor the formulas he has to convert units to pixels works. The functionality I want is when the user changes the anchor I want the control to stay where it is, but recalc the units using the new anchor values in the formula.

Using the editors screen as reference, an absolute pixel position is

pp = ( x, y )

When computing the absolute position from the relative position pr, the relative position is scaled by the vertical resolution rv in both dimensions, and the absolute position of the anchor pa is added:

pp := pa + pr * rv

Because you're interested in the relative position for a given absolute position, you need to solve for that variable. Hence:

pr = ( pp - pa ) / rv

Notice that the anchor position pa herein is those of the newly picked anchor, because you want to calculate the result relative to those.

So pr = ( pp - pa ) / rv is the equation I'm using to get the (I call x,y unit):

         // this is called from the editor when a control is placed. we pass in the actual pixel x and convert to "units"
        private float _SetPixelX(int x, Size res)
        {
            return (float)(x - GetAnchorPoint(res).X) / (float)res.Height;
        }

To convert from units back to pixels for drawing I do the following (which works because it draws fine with default TopLeft anchor):

        protected int XUnitsToPixels(Size res)
        {
            return GetAnchorPoint(res).X + (int)(X * res.Height);
        }

When the user changes the anchor, I convert units (which is what I store) back to pixels using the above function, then using the new anchor values I convert the pixels back to the new units, but it doesn't work using a different anchor. The units end up all over the place.

[EDIT]

Actually initially it works for any anchor. It's when I change anchors that it doesn't end up being the same position after recalcing the units with the new anchor.

inside my Control class

        private Anchors anchor;
        public Anchors Anchor 
        {
            get { return anchor; }
            set
            {
                Size res = new Size();
 
                anchor = value;
 
                // get the canvas resolution so we can recalc position
                if (OnAnchorChanged != null)
                    res = OnAnchorChanged(this);
 
                // recalc the pos units to keep the widget in the same location given this new anchor selection
                int _x = XUnitsToPixels(res);
                int _y = YUnitsToPixels(res);
 
               // x & y are member variables that are in units
                x = _SetPixelX(_x, res);
                y = _SetPixelY(_y, res);
 
                // need to call this to show the changes by making the canvas redraw the controls
                if (OnInvalidated != null)
                    OnInvalidated(this);
            }
        }

If I understand your code snippet correctly, then this part

                anchor = value;

                // get the canvas resolution so we can recalc position
                if (OnAnchorChanged != null)
                    res = OnAnchorChanged(this);

                // recalc the pos units to keep the widget in the same location given this new anchor selection
                int _x = XUnitsToPixels(res);
                int _y = YUnitsToPixels(res);

               // x & y are member variables that are in units
                x = _SetPixelX(_x, res);
                y = _SetPixelY(_y, res);

                // get the canvas resolution so we can recalc position
                if (OnAnchorChanged != null)
                    res = OnAnchorChanged(this);

                // recalc the pos units to keep the widget in the same location given this new anchor selection
                int _x = XUnitsToPixels(res);
                int _y = YUnitsToPixels(res);

                anchor = value;

               // x & y are member variables that are in units
                x = _SetPixelX(_x, res);
                y = _SetPixelY(_y, res);

Oh man how did I miss that :) You are correct! Thank you for helping me with that. It was driving me crazy as I was pretty sure my formulas were right.