RelativeThickness Struct

[robloo]

I had to solve a problem with a custom control where there is a single BorderThickness property but the content around which this applies can change orientations/positions -- like DockPanel. The problem arises when content changes positions between left/right/etc. I don't want the same border thicknesses. Actually you would really want to define the border thicknesses in a relative way like "inside edge" or "outside edge".

The solution used is fairly general-purpose and adds a new RelativeThickness struct defined below. I think this would be useful for others, but is there any desire to see this added to the core framework itself?

using Avalonia;
using BaseKit;
using System;
using System.ComponentModel;
using System.Globalization;

#nullable enable

namespace App.UI
{
    // A standard Thickness struct has the following properties
    //
    // Index  Edge
    //  0      Left
    //  1      Top
    //  2      Right
    //  3      Bottom
    //
    // This is mapped to a relative edge coordinate system as follows.
    // These redefine the meaning of a thickness value based on index.
    //
    // Index  Relative Edge     Degrees        Old Edge
    //  0      Start             0              Left
    //  1      Clockwise         90 clockwise   Top
    //  2      Opposite          180 clockwise  Right
    //  3      CounterClockwise  270 clockwise  Bottom
    //
    // It is then possible to map these relative edges based on the given
    // starting edge "anchor".

    /// <summary>
    /// Describes the relative thickness of a frame around a rectangle.
    /// All edge thickness positions are defined relative to the starting edge.
    /// </summary>
    [TypeConverter(typeof(RelativeThicknessTypeConverter))]
    public struct RelativeThickness :
        IEquatable<RelativeThickness>
    {
        /// <summary>
        /// Initializes a new instance of the <see cref="RelativeThickness"/> struct.
        /// </summary>
        /// <param name="uniformSize">The uniform thickness of all edges.</param>
        public RelativeThickness(double uniformSize)
        {
            this.Start = uniformSize;
            this.Clockwise = uniformSize;
            this.Opposite = uniformSize;
            this.CounterClockwise = uniformSize;
        }

        /// <summary>
        /// Initializes a new instance of the <see cref="RelativeThickness"/> struct.
        /// </summary>
        /// <param name="start">The thickness of the starting edge.</param>
        /// <param name="clockwise">The thickness of the edge 90 degrees clockwise from the start.</param>
        /// <param name="opposite">The thickness of the edge 180 degrees (opposite) from the start.</param>
        /// <param name="counterClockwise">The thickness of the edge 270 degrees clockwise and 90 degrees
        /// counter-clockwise from the start.</param>
        public RelativeThickness(
            double start,
            double clockwise,
            double opposite,
            double counterClockwise)
        {
            this.Start = start;
            this.Clockwise = clockwise;
            this.Opposite = opposite;
            this.CounterClockwise = counterClockwise;
        }

        /// <summary>
        /// Gets the thickness of the starting edge.
        /// </summary>
        public double Start { get; init; }

        /// <summary>
        /// Gets the thickness of the edge 90 degrees clockwise from the <see cref="Start"/> edge.
        /// </summary>
        public double Clockwise { get; init; }

        /// <summary>
        /// Gets the thickness of the edge 180 degrees (opposite) from the <see cref="Start"/> edge.
        /// </summary>
        public double Opposite { get; init; }

        /// <summary>
        /// Gets the thickness of the edge 270 degrees clockwise and 90 degrees counter-clockwise
        /// from the <see cref="Start"/> edge.
        /// </summary>
        public double CounterClockwise { get; init; }

        /// <summary>
        /// Gets a value indicating whether all thicknesses are equal.
        /// </summary>
        public bool IsUniform =>
            this.Start.Equals(this.Opposite) &&
            this.Start.Equals(this.Clockwise) &&
            this.Start.Equals(this.CounterClockwise);

        /// <inheritdoc/>
        public bool Equals(RelativeThickness other)
        {
            return
                other.Start == this.Start &&
                other.Clockwise == this.Clockwise &&
                other.Opposite == this.Opposite &&
                other.CounterClockwise == this.CounterClockwise;
        }

        /// <inheritdoc/>
        public override bool Equals(object? obj)
        {
            if (obj is RelativeThickness passedObj)
            {
                return this.Equals(passedObj);
            }
            else
            {
                return false;
            }
        }

        /// <inheritdoc/>
        public override int GetHashCode()
        {
            return HashCode.Combine(
                this.Start,
                this.Clockwise,
                this.Opposite,
                this.CounterClockwise);
        }

        /// <inheritdoc/>
        public override string ToString()
        {
            return FormattableString.Invariant($"{this.Start},{this.Clockwise},{this.Opposite},{this.CounterClockwise}");
        }

        /// <summary>
        /// Converts the <see cref="RelativeThickness"/> into an absolute <see cref="Thickness"/> oriented according to
        /// the given anchor edge.
        /// </summary>
        /// <param name="anchor">Defines the starting anchor edge of the <see cref="RelativeThickness"/>
        /// used to transform into an absolute <see cref="Thickness"/>.</param>
        /// <returns>An absolute <see cref="Thickness"/> oriented according to the given anchor edge.</returns>
        public Thickness ToThickness(Edge anchor)
        {
            switch (anchor)
            {
                default:
                case Edge.Left:

                    return new Thickness(
                        left: this.Start,
                        top: this.Clockwise,
                        right: this.Opposite,
                        bottom: this.CounterClockwise);

                case Edge.Top:

                    return new Thickness(
                        left: this.CounterClockwise,
                        top: this.Start,
                        right: this.Clockwise,
                        bottom: this.Opposite);

                case Edge.Right:

                    return new Thickness(
                        left: this.Opposite,
                        top: this.CounterClockwise,
                        right: this.Start,
                        bottom: this.Clockwise);

                case Edge.Bottom:

                    return new Thickness(
                        left: this.Clockwise,
                        top: this.Opposite,
                        right: this.CounterClockwise,
                        bottom: this.Start);
            }
        }

        /// <summary>
        /// Deconstructs the <see cref="RelativeThickness"/> into its individual thickness values.
        /// </summary>
        /// <param name="start">The thickness of the starting edge.</param>
        /// <param name="clockwise">The thickness of the edge 90 degrees clockwise from the start.</param>
        /// <param name="opposite">The thickness of the edge 180 degrees (opposite) from the start.</param>
        /// <param name="counterClockwise">The thickness of the edge 270 degrees clockwise and 90 degrees
        /// counter-clockwise from the start.</param>
        public void Deconstruct(out double start, out double clockwise, out double opposite, out double counterClockwise)
        {
            start            = this.Start;
            clockwise        = this.Clockwise;
            opposite         = this.Opposite;
            counterClockwise = this.CounterClockwise;
        }

        /// <summary>
        /// Parses a <see cref="RelativeThickness"/> string.
        /// </summary>
        /// <param name="s">The string.</param>
        /// <returns>The <see cref="RelativeThickness"/>.</returns>
        public static RelativeThickness Parse(string s)
        {
            if (string.IsNullOrWhiteSpace(s))
            {
                throw new ArgumentNullException(nameof(s));
            }

            var parts = s.Split(',');

            if (parts.Length == 1)
            {
                return new RelativeThickness(
                    double.Parse(parts[0], CultureInfo.InvariantCulture));
            }
            else if (parts.Length == 4)
            {
                return new RelativeThickness(
                    double.Parse(parts[0], CultureInfo.InvariantCulture),
                    double.Parse(parts[1], CultureInfo.InvariantCulture),
                    double.Parse(parts[2], CultureInfo.InvariantCulture),
                    double.Parse(parts[3], CultureInfo.InvariantCulture));
            }
            else
            {
                throw new FormatException("RelativeThickness must have one or four comma-separated values.");
            }
        }

        /// <summary>
        /// Indicates whether the values of two specified <see cref="RelativeThickness"/> objects are equal.
        /// </summary>
        /// <param name="left">The first object to compare.</param>
        /// <param name="right">The second object to compare.</param>
        /// <returns>True if left and right are equal; otherwise, false.</returns>
        public static bool operator ==(RelativeThickness left, RelativeThickness right)
        {
            return left.Equals(right);
        }

        /// <summary>
        /// Indicates whether the values of two specified <see cref="RelativeThickness"/> objects are not equal.
        /// </summary>
        /// <param name="left">The first object to compare.</param>
        /// <param name="right">The second object to compare.</param>
        /// <returns>True if left and right are not equal; otherwise, false.</returns>
        public static bool operator !=(RelativeThickness left, RelativeThickness right)
        {
            return !(left == right);
        }
    }
}

[theoractice]

Are you looking for:
https://github.com/metaone01/RelativeControl.Avalonia

[robloo]

This is actually different -- it's relative by orientation rather than relative by value/dimension/units. It brings up a good point though, there are multiple "Relative" definitions.

That's a really cool project though! There are so many great 3rd party libraries it's hard to discover them all.

[maxkatz6]

I would imagine RelativeThickness more in line with RelativeSize/Point structures. With optional percentage units. As mentioned in RelativeControl.Avalonia.
But even more useful for RelativeCornerRadius. CSS supports percentage corners radii - 50%, 50%, 50%, 50% would display a circle/oval.

I know it would complicate renderer a lot but would be nice one day.