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:
@@ -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}" />
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user