Skip to content

xtuzy/SharpConstraintLayout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

83057e1 · May 7, 2024
Apr 2, 2022
Apr 26, 2024
Apr 2, 2022
May 11, 2022
May 7, 2024
May 7, 2024
Jan 24, 2024
May 7, 2024
May 7, 2024
Mar 30, 2022
Nov 27, 2021
Jan 24, 2024
Nov 28, 2021
Mar 8, 2023
Apr 27, 2024
Oct 2, 2022

Repository files navigation

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 🎆

NuGet version(SharpConstraintLayout.Core), it contain core logic of constraintlayout, you can base on it create your ConstraintLayout for other dotnet UI framework.

NuGet version(SharpConstraintLayout.Maui), 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.

NuGet version(SharpConstraintLayout.Maui.Native), 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

Maui SharpConstraintLayout Example

Installation

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

Notice

  1. Now you create constraint only by code.
  2. Here all example use Maui
  3. 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