Implement ItemSpacing and LineSpacing in ElasticWrapPanel (#843)

* Initial plan

* Implement ItemSpacing and LineSpacing support for ElasticWrapPanel

Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>

* Add demo tab showcasing ItemSpacing and LineSpacing

Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>

* Add additional test for ItemSpacing affecting line wrapping

Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>

* feat: add bindings for IsFillHorizontal and IsFillVertical in ElasticWrapPanelDemo

* Fix measure/arrange mismatch by tracking spacing in UVCollection

Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>

* feat: add ItemSpacing & LineSpacing FormItems.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>
Co-authored-by: Dong Bin <popmessiah@hotmail.com>
Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
This commit is contained in:
Copilot
2025-12-16 20:39:50 +08:00
committed by GitHub
parent 6f7db1c20c
commit e54474b0f9
4 changed files with 263 additions and 15 deletions

View File

@@ -64,6 +64,22 @@
Minimum="0"
Value="{Binding ItemHeight}" />
</u:FormItem>
<u:FormItem Label="ItemSpacing">
<u:NumericDoubleUpDown
AllowDrag="True"
Step="1"
Maximum="100"
Minimum="-10"
Value="{Binding ItemSpacing}" />
</u:FormItem>
<u:FormItem Label="LineSpacing">
<u:NumericDoubleUpDown
AllowDrag="True"
Step="1"
Maximum="100"
Minimum="-10"
Value="{Binding LineSpacing}" />
</u:FormItem>
</u:FormGroup>
<u:FormGroup Header="FixToRB Extension" IsEnabled="{Binding #FixToRBTabItem.IsSelected}">
<u:FormItem>
@@ -108,6 +124,8 @@
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
ItemSpacing="{Binding ItemSpacing}"
LineSpacing="{Binding LineSpacing}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
@@ -134,6 +152,8 @@
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
ItemSpacing="{Binding ItemSpacing}"
LineSpacing="{Binding LineSpacing}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
@@ -165,6 +185,8 @@
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
ItemSpacing="{Binding ItemSpacing}"
LineSpacing="{Binding LineSpacing}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
@@ -200,6 +222,8 @@
<u:Divider HorizontalContentAlignment="Left" Content="WrapPanel" />
<WrapPanel ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
ItemSpacing="{Binding ItemSpacing}"
LineSpacing="{Binding LineSpacing}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
@@ -223,6 +247,8 @@
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
ItemSpacing="{Binding ItemSpacing}"
LineSpacing="{Binding LineSpacing}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
@@ -249,6 +275,8 @@
<u:Divider HorizontalContentAlignment="Left" Content="WrapPanel" />
<WrapPanel ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
ItemSpacing="{Binding ItemSpacing}"
LineSpacing="{Binding LineSpacing}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
@@ -285,6 +313,8 @@
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
ItemSpacing="{Binding ItemSpacing}"
LineSpacing="{Binding LineSpacing}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />

View File

@@ -14,6 +14,8 @@ public partial class ElasticWrapPanelDemoViewModel : ObservableObject
[ObservableProperty] private bool _isFillVertical;
[ObservableProperty] private double _itemWidth = 40d;
[ObservableProperty] private double _itemHeight = 40d;
[ObservableProperty] private double _itemSpacing;
[ObservableProperty] private double _lineSpacing;
[ObservableProperty] private bool _autoWidth = true;
[ObservableProperty] private bool _autoHeight = true;