feat: Add responsive grid Row/Col controls and demo.

This commit is contained in:
NaBian committed 2026-06-13 18:12:59 +08:00
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();
}
}