feat: Add responsive grid Row/Col controls and demo.
This commit is contained in:
1 parent
3aea65a6b9
commit
700abba273
7 files changed
+589
No files matched your search
@@ -0,0 +1,156 @@
|
||||
<UserControl x:Class="HandyControlDemo.UserControl.GridDemo"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:hc="https://handyorg.github.io/handycontrol"
|
||||
xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
|
||||
Background="{DynamicResource RegionBrush}">
|
||||
<ScrollViewer>
|
||||
<StackPanel Margin="32">
|
||||
<TextBlock Text="{x:Static langs:Lang.BasicLayout}" Theme="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left" />
|
||||
<hc:Row Margin="0,20,0,0">
|
||||
<hc:Col Span="24">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0">
|
||||
<hc:Col Span="12">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="12">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0">
|
||||
<hc:Col Span="8">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="8">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="8">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0">
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0">
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<TextBlock Text="{x:Static langs:Lang.ColumnSpacing}" Margin="0,32,0,0" Theme="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left" />
|
||||
<hc:Row Margin="0,20,0,0" Gutter="20">
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<TextBlock Text="{x:Static langs:Lang.HybridLayout}" Margin="0,32,0,0" Theme="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left" />
|
||||
<hc:Row Margin="0,20,0,0" Gutter="20">
|
||||
<hc:Col Span="16">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="8">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0" Gutter="20">
|
||||
<hc:Col Span="8">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="8">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0" Gutter="20">
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="16">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="4">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<TextBlock Text="{x:Static langs:Lang.ColumnOffset}" Margin="0,32,0,0" Theme="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left" />
|
||||
<hc:Row Margin="0,20,0,0" Gutter="20">
|
||||
<hc:Col Span="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6" Offset="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0" Gutter="20">
|
||||
<hc:Col Span="6" Offset="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Span="6" Offset="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<hc:Row Margin="0,20,0,0" Gutter="20">
|
||||
<hc:Col Span="12" Offset="6">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
<TextBlock Text="{x:Static langs:Lang.ResponsiveLayout}" Margin="0,32,0,0" Theme="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left" />
|
||||
<hc:Row Margin="0,20,0,0" Gutter="10">
|
||||
<hc:Col Layout="8,6,4,3,1">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Layout="4 6 8 9 11">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Layout="4 6 8 9 11">
|
||||
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
<hc:Col Layout="8 6 4 3 1">
|
||||
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" />
|
||||
</hc:Col>
|
||||
</hc:Row>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</UserControl>
|
||||
@@ -0,0 +1,9 @@
|
||||
namespace HandyControlDemo.UserControl;
|
||||
|
||||
public partial class GridDemo : Avalonia.Controls.UserControl, IFull
|
||||
{
|
||||
public GridDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user