Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update autolayout docs #952

Merged
merged 2 commits into from
Dec 19, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 21 additions & 15 deletions doc/controls/AutoLayoutControl.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,20 @@
uid: Toolkit.Controls.AutoLayoutControl
---
> [!TIP]
> This guide covers details for `AutoLayoutControl` specifically. If you are just getting started with the Uno Toolkit UI Library, please see our [general getting started](../getting-started.md) page to make sure you have the correct setup in place.
> This guide covers details for the `AutoLayout` control. If you are just getting started with the Uno Toolkit UI Library, please see our [general getting started](../getting-started.md) page to make sure you have the correct setup in place.

## Summary
`AutoLayoutControl` arranges child elements into a single line that can be oriented horizontally or vertically. It is the reflection in XAML of the [Autolayout frame in Figma](https://www.figma.com/widget-docs/api/component-AutoLayout).

`AutoLayout` arranges child elements into a single row or column, depending on the `Orientation` property. The control is intended to reflect the same behaviors as the [AutoLayout Frame component in Figma](https://www.figma.com/widget-docs/api/component-AutoLayout).

### C#

```csharp
public partial class AutoLayout : Control
```

### XAML

```xml
xmlns:utu="using:Uno.Toolkit.UI"
...
Expand All @@ -22,30 +25,33 @@ xmlns:utu="using:Uno.Toolkit.UI"
</utu:AutoLayout>
```

### Inheritance
### Inheritance

Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control

### Constructors

| Constructor | Description |
|-----------------|----------------------------------------------------------|
| AutoLayout() | Initializes a new instance of the `AutoLayout` class. |

### Properties

Property|Type|Description
-|-|-
Orientation | Orientation | Defines constants that specify the different orientations that a control or layout can have.
Spacing | double | Gets or sets the uniform distance (in pixels) between grid. Each grid of the AutoLayout will have the spacing set by this value depending the AautoLayout orientation.
Justify | AutoLayoutJustify | Either Stack, space between children behave like a `StackPanel`, or SpaceBetween, between each children a equal space is added assuring that all the `AutoLayout` space is occupy. Note : if a child has his `PrimaryAlignment` set to Stretch, it will default to Stack.
Children | AutoLayoutChildren | List of FrameworkElement that are the AutoLayout children.
PrimaryAxisAlignment | AutoLayoutAlignment | Indicates where the content be displayed on the axis of the AutoLayout orientation.
IsReverseZIndex | bool | Reverse the Z-index of all the children.
Padding | Thickness | /!\ Padding for `AutoLayout` behave the same as it does within the Figma Plugin: The anchor points determine which sides of the Padding will taken into consideration. For example, items that are aligned to the Right and Top positions will only take the `Tickness.Right` and `Thickness.Top` values of `Padding` into consideration.
Orientation | `Orientation` | Gets or sets the dimension by which the items are stacked
Spacing | `double` | Gets or sets a uniform distance (in pixels) between stacked items. It is applied in the direction of the `AutoLayout`'s Orientation
Justify | `AutoLayoutJustify` | Gets or sets the value to determine how items are justified within the container. Options are `Stack` or `SpaceBetween`. Note: if a child has its `PrimaryAlignment` set to `Stretch`, it will default to `Stack`
PrimaryAxisAlignment | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the value of the `Orientation` property. Options are `Start`, `Center`, and `End`. The default is `Start`
IsReverseZIndex | `bool` | Gets or sets whether or not the ZIndex of the children should be reversed. The default is `false`
Padding | `Thickness` | **WARNING:** Padding for `AutoLayout` behaves the same as it does within the Figma Plugin: The anchor points determine which sides of the Padding will be taken into consideration. For example, items that are aligned to the Right and Top positions will only take the `Tickness.Right` and `Thickness.Top` values of `Padding` into consideration

### Attached Properties

Property|Type|Description
-|-|-
PrimaryAlignment|AutoLayoutPrimaryAlignment|Either Auto, the child grid take only the place it need in the autolayout direction, or Stretch, the child grid take all the available place in the autolayout direction. Note if set to Strech AutoLayoutJustify will behave as if in Stack mode.
CounterAlignment|AutoLayoutAlignment|Indicates where an element should be displayed on the counter axis of the parent orientation relative to the allocated layout slot of the parent element.
PrimaryLength|double| Sets the height or width of the child depending on the `Orientation`. If height or width are already set they will have priority.
CounterLength|double|Sets the height or width of the child depending on the inverse of `Orientation`. If height or width are already set they will have priority.
IsIndependentLayout | bool | Make the child independent of the AutoLayout positioning. Should not be used with other Attached Properties. Reflect the Absolute Position option from Figma.
PrimaryAlignment|`AutoLayoutPrimaryAlignment`| Gets or sets the alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the value of the `Orientation` property. Options are `Auto` and `Stretch`. The default is `Auto`
CounterAlignment|`AutoLayoutAlignment`| Gets or sets the counter-alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End`, and `Stretch`. The default is `Start`
PrimaryLength|`double`| Gets or sets the height or width of the child depending on the `Orientation`. If `Height` or `Width` are already set they will have priority.
CounterLength|`double`| Gets or sets the height or width of the child depending on the inverse of `Orientation`. If `Height` or `Width` are already set they will have priority.
IsIndependentLayout | `bool` | **WARNING:** Should not be used with other Attached Properties. Gets or sets whether the element is independent of the `AutoLayout` positioning. Reflects the `Absolute Position` option from Figma
Loading