Awesome

SharpConstraintLayout 🗜️📏

This is a C# port of ConstraintLayout, it convert constraintlayout.core and create ConstraintLayout for dotnet UI framework. Now, you can use ConstraintLayout in C# world 🎆

, it contain core logic of constraintlayout, you can base on it create your ConstraintLayout for other dotnet UI framework.

, it contain layout for Maui, ConstraintLayout is powerful, you can use it instead other layout

Notice：I stop update SharpConstraintLayout.Maui.Native, because dealing with difference of different platform is tiresome.

, it contain layout for net6-android,net6-ios,winui3, such as at android, you can use it instead Xamarin.AndroidX.ConstraintLayout

Using SharpConstraintLayout

Document see wiki

Installation

Search and install nuget SharpConstraintLayout.Maui (For Maui) or SharpConstraintLayout.Maui.Native (For net6-android,net6-ios,WinUI3)

Notice

Now you create constraint only by code.
Here all example use Maui
Run example app, you can find more example

Basis Align First you need create layout and add controls to layout,

var layout = new ConstraintLayout();
var firstButton = new Button(){ Text = "first"};
var secondButton = new Button(){ Text = "second"};
layout.AddElement(firstButton,secondButton)

then set first button at center of layout.

using(var set = FluentConstraintSet())
{
  set.Clone(layout);
  set.Select(firstButton).CenterTo()
  set.ApplyTo(layout);
}

or you can set second button align first button

using(var set = FluentConstraintSet())
{
  set.Clone(layout);
  set.Select(firstButton).CenterTo()
  .Select(secondButton).LeftToRight(firstButton).CenterYTo(firstButton)
  set.ApplyTo(layout);
}

Current Features

Align Left,Right,Top,Bottom,Center
Ratio of Width with Height Ratio defines one dimension of a widget as a ratio of the other one. If both width and height are set to 0dp the system sets the largest dimensions that satisfy all constraints while maintaining the aspect ratio.
Chains Chains provide group-like behavior in a single axis (horizontally or vertically). The other axis can be constrained independently.
Guideline Guideline allow reactive layout behavior with fixed or percentage based positioning for multiple widgets.
Barrier Barrier references multiple widgets to create a virtual guideline based on the most extreme widget on the specified side.
Flow Flow is a VirtualLayout that allows positioning of referenced widgets horizontally or vertically similar to a Chain. If the referenced elements do not fit within the given bounds it has the ability to wrap them and create multiple chains.
Group Group can control visibility of multiple views.
RTL
Align Baseline

💻 Authors of ConstraintLayout

John Hoford : MotionLayout (jafu888)
Nicolas Roard : ConstraintLayout (camaelon)

See also the list of contributors who participated in this project.

🔖 License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details