generated from unoplatform/template
-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(AutoLayout): add Height and Width support and update documentation.
- Loading branch information
1 parent
cdd407c
commit 280f1f9
Showing
6 changed files
with
138 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
> [!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. | ||
## 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). | ||
|
||
### C# | ||
```csharp | ||
public partial class AutoLayout : Control | ||
``` | ||
|
||
### XAML | ||
```xml | ||
xmlns:utu="using:Uno.Toolkit.UI" | ||
... | ||
|
||
<utu:AutoLayout> | ||
contents | ||
</utu:AutoLayout> | ||
``` | ||
|
||
### Inheritance | ||
Object → DependencyObject → UIElement → FrameworkElement → 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 | ||
|
||
### 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| Set the grid size in parent orientation [Deprecated should Height and Width instead] | ||
CounterLength|double|Sets the child size in parent counter orientation [Deprecated should Height and Width instead] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/AutoLayoutPage.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<Page | ||
x:Class="Uno.Toolkit.Samples.Content.Controls.AutoLayoutPage" | ||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
xmlns:local="using:Uno.Toolkit.Samples.Content.Controls" | ||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
xmlns:utu="using:Uno.Toolkit.UI" | ||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
xmlns:sample="using:Uno.Toolkit.Samples" | ||
mc:Ignorable="d" | ||
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> | ||
|
||
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> | ||
<sample:SamplePageLayout x:Name="SamplePageLayout" IsDesignAgnostic="True"> | ||
<sample:SamplePageLayout.DesignAgnosticTemplate> | ||
<DataTemplate> | ||
<ScrollViewer HorizontalScrollMode="Disabled"> | ||
<StackPanel> | ||
<TextBlock Text="Use a AutoLayout behave almost like a StackPanel, but with row that that can stretch. It was made to emulate the Figma auto layout" | ||
Style="{StaticResource BodyTextBlockStyle}" | ||
Margin="0,24,0,0" /> | ||
|
||
<utu:AutoLayout Spacing="10" | ||
Margin="0,24,0,0"> | ||
<TextBlock Text="With the attached properties CounterLength and PrimaryLength" TextAlignment="Center"/> | ||
<Rectangle utu:AutoLayout.CounterLength="100" utu:AutoLayout.PrimaryLength="100" Fill="Blue"/> | ||
<TextBlock Text="With Width and Height" TextAlignment="Center"/> | ||
<Rectangle Height="100" Width="100" Fill="Red"/> | ||
<TextBlock Text="Margin don't work with the attached properties CounterLength and PrimaryLength" TextAlignment="Center"/> | ||
<Rectangle Margin="20" utu:AutoLayout.CounterLength="100" utu:AutoLayout.PrimaryLength="100" Fill="Green"/> | ||
<TextBlock Text="Margin work With Width and Height" TextAlignment="Center"/> | ||
<Rectangle Margin="20" Width="100" Height="100" Fill="Pink"/> | ||
</utu:AutoLayout> | ||
</StackPanel> | ||
</ScrollViewer> | ||
</DataTemplate> | ||
</sample:SamplePageLayout.DesignAgnosticTemplate> | ||
</sample:SamplePageLayout> | ||
</Grid> | ||
</Page> |
44 changes: 44 additions & 0 deletions
44
...es/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/AutoLayoutPage.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
using System; | ||
using System.Collections.Generic; | ||
using System.IO; | ||
using System.Linq; | ||
using System.Runtime.InteropServices.WindowsRuntime; | ||
using Uno.Toolkit.Samples.Entities; | ||
using Windows.Foundation; | ||
using Windows.Foundation.Collections; | ||
#if IS_WINUI | ||
using Microsoft.UI; | ||
using Microsoft.UI.Xaml; | ||
using Microsoft.UI.Xaml.Controls; | ||
using Microsoft.UI.Xaml.Controls.Primitives; | ||
using Microsoft.UI.Xaml.Data; | ||
using Microsoft.UI.Xaml.Input; | ||
using Microsoft.UI.Xaml.Media; | ||
using Microsoft.UI.Xaml.Navigation; | ||
#else | ||
using Windows.UI; | ||
using Windows.UI.Xaml; | ||
using Windows.UI.Xaml.Controls; | ||
using Windows.UI.Xaml.Controls.Primitives; | ||
using Windows.UI.Xaml.Data; | ||
using Windows.UI.Xaml.Input; | ||
using Windows.UI.Xaml.Media; | ||
using Windows.UI.Xaml.Navigation; | ||
#endif | ||
|
||
// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238 | ||
|
||
namespace Uno.Toolkit.Samples.Content.Controls | ||
{ | ||
/// <summary> | ||
/// An empty page that can be used on its own or navigated to within a Frame. | ||
/// </summary> | ||
[SamplePage(SampleCategory.Controls, "AutoLayout")] | ||
public sealed partial class AutoLayoutPage : Page | ||
{ | ||
public AutoLayoutPage() | ||
{ | ||
this.InitializeComponent(); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters