From 1b7ee4a04de54e159a8485b5f51790d0a5677079 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Fri, 14 Jun 2024 18:47:16 +0800
Subject: [PATCH] feat: options.

---
 .../Pages/ElasticWrapPanelDemo.axaml          | 279 ++++++++++--------
 .../ElasticWrapPanelDemoViewModel.cs          | 116 ++++----
 2 files changed, 229 insertions(+), 166 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/ElasticWrapPanelDemo.axaml b/demo/Ursa.Demo/Pages/ElasticWrapPanelDemo.axaml
index abb5a7f..652a204 100644
--- a/demo/Ursa.Demo/Pages/ElasticWrapPanelDemo.axaml
+++ b/demo/Ursa.Demo/Pages/ElasticWrapPanelDemo.axaml
@@ -5,51 +5,89 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:u="https://irihi.tech/ursa"
              xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
-             d:DesignHeight="450"
+             d:DesignHeight="800"
              d:DesignWidth="800"
              x:CompileBindings="True"
              x:DataType="viewModels:ElasticWrapPanelDemoViewModel"
              mc:Ignorable="d">
+    <UserControl.Styles>
+        <Style Selector="u|FormItem">
+            <Setter Property="Width" Value="320" />
+        </Style>
+    </UserControl.Styles>
     <DockPanel>
-        <StackPanel x:Name="ControlBar" DockPanel.Dock="Top">
-            <StackPanel Orientation="Horizontal">
-                <TextBlock Text="Orientation" />
-                <ComboBox ItemsSource="{Binding Orientations}" SelectedItem="{Binding SelectedOrientation}" />
-                <TextBlock Text="HorizontalScrollBar" />
-                <ComboBox ItemsSource="{Binding HScrollBarVisibilities}" SelectedItem="{Binding HorizontalVisibility}" />
-                <TextBlock Text="VerticalScrollBar" />
-                <ComboBox ItemsSource="{Binding VScrollBarVisibilities}" SelectedItem="{Binding VerticalVisibility}" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <CheckBox Content="IsFillHorizontal" IsChecked="{Binding IsFillHorizontal}" />
-                <TextBlock Text="ItemWidth" />
-                <NumericUpDown Increment="1"
-                               Maximum="1000"
-                               Minimum="0"
-                               Value="{Binding ItemWidth}" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <CheckBox Content="IsFillVertical" IsChecked="{Binding IsFillVertical}" />
-                <TextBlock Text="ItemHeight" />
-                <NumericUpDown Increment="1"
-                               Maximum="1000"
-                               Minimum="0"
-                               Value="{Binding ItemHeight}" />
-            </StackPanel>
-            <StackPanel.Styles>
-                <Style Selector="StackPanel#ControlBar &gt; StackPanel &gt; TextBlock">
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                    <Setter Property="Margin" Value="10 0" />
-                </Style>
-                <Style Selector="StackPanel#ControlBar &gt; StackPanel &gt; TextBox, NumericUpDown">
-                    <Setter Property="Width" Value="100" />
-                </Style>
-                <Style Selector="StackPanel#ControlBar &gt; StackPanel &gt; ComboBox">
-                    <Setter Property="Width" Value="130" />
-                </Style>
-            </StackPanel.Styles>
-        </StackPanel>
-
+        <u:Form DockPanel.Dock="Left"
+                LabelAlignment="Left"
+                LabelPosition="Left"
+                LabelWidth="*">
+            <u:FormGroup>
+                <u:FormItem Label="Orientation">
+                    <ComboBox ItemsSource="{Binding Orientations}" SelectedItem="{Binding SelectedOrientation}" />
+                </u:FormItem>
+                <u:FormItem Label="HorizontalScrollBar">
+                    <ComboBox ItemsSource="{Binding HScrollBarVisibilities}"
+                              SelectedItem="{Binding HorizontalVisibility}" />
+                </u:FormItem>
+                <u:FormItem Label="VerticalScrollBar">
+                    <ComboBox ItemsSource="{Binding VScrollBarVisibilities}"
+                              SelectedIndex="{Binding VerticalVisibility}" />
+                </u:FormItem>
+                <u:FormItem>
+                    <u:FormItem.Label>
+                        <CheckBox Content="IsFillHorizontal" IsChecked="{Binding IsFillHorizontal}" />
+                    </u:FormItem.Label>
+                    <u:NumericDoubleUpDown
+                        InnerLeftContent="ItemWidth"
+                        Step="1"
+                        AllowDrag="True"
+                        Maximum="1000"
+                        Minimum="0"
+                        Value="{Binding ItemWidth}" />
+                </u:FormItem>
+                <u:FormItem>
+                    <u:FormItem.Label>
+                        <CheckBox Content="IsFillVertical" IsChecked="{Binding IsFillVertical}" />
+                    </u:FormItem.Label>
+                    <u:NumericDoubleUpDown
+                        InnerLeftContent="ItemHeight"
+                        AllowDrag="True"
+                        Step="1"
+                        Maximum="1000"
+                        Minimum="0"
+                        Value="{Binding ItemHeight}" />
+                </u:FormItem>
+            </u:FormGroup>
+            <u:FormGroup Header="FixToRB Extension" IsEnabled="{Binding #FixToRBTabItem.IsSelected}">
+                <u:FormItem>
+                    <u:FormItem.Label>
+                        <CheckBox Content="AutoWidth" IsChecked="{Binding AutoWidth}" />
+                    </u:FormItem.Label>
+                    <u:NumericDoubleUpDown
+                        AllowDrag="True"
+                        Maximum="1000"
+                        Minimum="0"
+                        IsEnabled="{Binding !AutoWidth}"
+                        Value="{Binding ItemSelfWidth}" />
+                </u:FormItem>
+                <u:FormItem>
+                    <u:FormItem.Label>
+                        <CheckBox Content="AutoHeight" IsChecked="{Binding AutoHeight}" />
+                    </u:FormItem.Label>
+                    <u:NumericDoubleUpDown
+                        AllowDrag="True"
+                        Maximum="1000"
+                        Minimum="0"
+                        IsEnabled="{Binding !AutoHeight}"
+                        Value="{Binding ItemSelfHeight}" />
+                </u:FormItem>
+                <u:FormItem Label="Horizontal Alignment">
+                    <ComboBox ItemsSource="{Binding CmbHAligns}" SelectedItem="{Binding CmbHAlign}" />
+                </u:FormItem>
+                <u:FormItem Label="Vertical Alignment">
+                    <ComboBox ItemsSource="{Binding CmbVAligns}" SelectedItem="{Binding CmbVAlign}" />
+                </u:FormItem>
+            </u:FormGroup>
+        </u:Form>
         <TabControl>
             <TabItem Header="Flat">
                 <TabControl>
@@ -102,19 +140,15 @@
                                 <Border Background="{DynamicResource SemiOrange5Color}" />
                                 <Border Background="{DynamicResource SemiGrey5Color}" />
                             </u:ElasticWrapPanel>
-                            <Border Grid.Row="1"
-                                    Margin="0,4"
-                                    BorderBrush="{DynamicResource SemiGrey9Color}"
-                                    BorderThickness="1">
+                            <Border Grid.Row="1" Margin="0,4" Theme="{StaticResource CardBorder}">
                                 <TextBlock Text="This is blank" />
                             </Border>
                         </Grid>
                     </TabItem>
                     <TabItem Header="ScrollViewer">
-                        <Border Margin="0,4"
-                                BorderBrush="{DynamicResource SemiGrey9Color}"
-                                BorderThickness="1">
-                            <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
+                        <Border Margin="0,4">
+                            <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
+                                          VerticalScrollBarVisibility="{Binding VerticalVisibility}">
                                 <u:ElasticWrapPanel IsFillHorizontal="{Binding IsFillHorizontal}"
                                                     IsFillVertical="{Binding IsFillVertical}"
                                                     ItemHeight="{Binding ItemHeight}"
@@ -143,39 +177,13 @@
                 </TabControl>
             </TabItem>
 
-            <TabItem Header="FixToRB">
+            <TabItem Header="FixToRB" Name="FixToRBTabItem">
                 <DockPanel>
-                    <StackPanel x:Name="ControlBar2" DockPanel.Dock="Top">
-                        <StackPanel Orientation="Horizontal">
-                            <TextBlock Text="Control Width" />
-                            <TextBox Text="{Binding ItemSelfWidth}" />
-                            <TextBlock Text="Control Height" />
-                            <TextBox Text="{Binding ItemSelfHeight}" />
-                        </StackPanel>
-                        <StackPanel Orientation="Horizontal">
-                            <TextBlock Text="Horizontal Alignment" />
-                            <ComboBox ItemsSource="{Binding CmbHAligns}" SelectedItem="{Binding CmbHAlign}" />
-                            <TextBlock Text="Vertical Alignment" />
-                            <ComboBox ItemsSource="{Binding CmbVAligns}" SelectedItem="{Binding CmbVAlign}" />
-                        </StackPanel>
-                        <StackPanel.Styles>
-                            <Style Selector="StackPanel#ControlBar2 &gt; StackPanel &gt; TextBlock">
-                                <Setter Property="VerticalAlignment" Value="Center" />
-                                <Setter Property="Margin" Value="10 0" />
-                            </Style>
-                            <Style Selector="StackPanel#ControlBar2 &gt; StackPanel &gt; TextBox, NumericUpDown">
-                                <Setter Property="Width" Value="100" />
-                            </Style>
-                            <Style Selector="StackPanel#ControlBar2 &gt; StackPanel &gt; ComboBox">
-                                <Setter Property="Width" Value="130" />
-                            </Style>
-                        </StackPanel.Styles>
-                    </StackPanel>
-
                     <TabControl>
                         <TabItem Header="Single">
                             <StackPanel>
-                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
+                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
+                                              VerticalScrollBarVisibility="{Binding VerticalVisibility}">
                                     <DockPanel>
                                         <Label Background="{DynamicResource SemiPurple2Color}"
                                                Content="WrapPanel"
@@ -183,27 +191,33 @@
                                         <WrapPanel ItemHeight="{Binding ItemHeight}"
                                                    ItemWidth="{Binding ItemWidth}"
                                                    Orientation="{Binding SelectedOrientation}">
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 1" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 2" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 3" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 4" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 5" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 6" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
@@ -223,7 +237,8 @@
                                         </WrapPanel>
                                     </DockPanel>
                                 </ScrollViewer>
-                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
+                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
+                                              VerticalScrollBarVisibility="{Binding VerticalVisibility}">
                                     <DockPanel>
                                         <Label Background="{DynamicResource SemiGreen2Color}"
                                                Content="ElasticWrapPanel"
@@ -233,27 +248,33 @@
                                                             ItemHeight="{Binding ItemHeight}"
                                                             ItemWidth="{Binding ItemWidth}"
                                                             Orientation="{Binding SelectedOrientation}">
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 1" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 2" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 3" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 4" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 5" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 6" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
@@ -277,7 +298,8 @@
                         </TabItem>
                         <TabItem Header="Multiply">
                             <StackPanel>
-                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
+                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
+                                              VerticalScrollBarVisibility="{Binding VerticalVisibility}">
                                     <DockPanel>
                                         <Label Background="{DynamicResource SemiPurple2Color}"
                                                Content="WrapPanel"
@@ -285,27 +307,33 @@
                                         <WrapPanel ItemHeight="{Binding ItemHeight}"
                                                    ItemWidth="{Binding ItemWidth}"
                                                    Orientation="{Binding SelectedOrientation}">
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 1" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 2" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 3" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 4" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 5" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 6" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
@@ -322,27 +350,33 @@
                                                         Margin="1"
                                                         Content="Export" />
                                             </UniformGrid>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 1" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 2" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 3" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 4" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 5" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 6" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
@@ -362,7 +396,8 @@
                                         </WrapPanel>
                                     </DockPanel>
                                 </ScrollViewer>
-                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
+                                <ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
+                                              VerticalScrollBarVisibility="{Binding VerticalVisibility}">
                                     <DockPanel>
                                         <Label Background="{DynamicResource SemiGreen2Color}"
                                                Content="ElasticWrapPanel"
@@ -372,27 +407,33 @@
                                                             ItemHeight="{Binding ItemHeight}"
                                                             ItemWidth="{Binding ItemWidth}"
                                                             Orientation="{Binding SelectedOrientation}">
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 1" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 2" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 3" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 4" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 5" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 6" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
@@ -409,27 +450,33 @@
                                                         Margin="1"
                                                         Content="Export" />
                                             </UniformGrid>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 1" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 2" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 3" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 4" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 5" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
-                                            <DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
+                                            <DockPanel Width="{Binding ItemSelfWidth}"
+                                                       Height="{Binding ItemSelfHeight}">
                                                 <TextBlock VerticalAlignment="Center" Text="Content 6" />
                                                 <TextBox MinHeight="20" />
                                             </DockPanel>
diff --git a/demo/Ursa.Demo/ViewModels/ElasticWrapPanelDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/ElasticWrapPanelDemoViewModel.cs
index e7e94cb..99b1203 100644
--- a/demo/Ursa.Demo/ViewModels/ElasticWrapPanelDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/ElasticWrapPanelDemoViewModel.cs
@@ -7,63 +7,79 @@ namespace Ursa.Demo.ViewModels;
 
 public partial class ElasticWrapPanelDemoViewModel : ObservableObject
 {
-    [ObservableProperty] private Orientation _selectedOrientation;
-    [ObservableProperty] private ScrollBarVisibility _horizontalVisibility;
-    [ObservableProperty] private ScrollBarVisibility _verticalVisibility;
-    [ObservableProperty] private ObservableCollection<Orientation> _orientations = null!;
-    [ObservableProperty] private ObservableCollection<ScrollBarVisibility> _hScrollBarVisibilities = null!;
-    [ObservableProperty] private ObservableCollection<ScrollBarVisibility> _vScrollBarVisibilities = null!;
+    [ObservableProperty]
+    private ObservableCollection<Orientation> _orientations = [Orientation.Horizontal, Orientation.Vertical];
 
-    [ObservableProperty] private bool _isFillHorizontal;
-    [ObservableProperty] private bool _isFillVertical;
-    [ObservableProperty] private double? _itemWidth;
-    [ObservableProperty] private double? _itemHeight;
+    [ObservableProperty] private Orientation _selectedOrientation = Orientation.Horizontal;
 
-    [ObservableProperty] private double? _itemSelfWidth;
-    [ObservableProperty] private double? _itemSelfHeight;
+    [ObservableProperty] private ObservableCollection<ScrollBarVisibility> _hScrollBarVisibilities =
+    [
+        ScrollBarVisibility.Disabled, ScrollBarVisibility.Auto, ScrollBarVisibility.Hidden, ScrollBarVisibility.Visible
+    ];
 
-    [ObservableProperty] private HorizontalAlignment _cmbHAlign;
-    [ObservableProperty] private VerticalAlignment _cmbVAlign;
-    [ObservableProperty] private ObservableCollection<HorizontalAlignment> _cmbHAligns = null!;
-    [ObservableProperty] private ObservableCollection<VerticalAlignment> _cmbVAligns = null!;
+    [ObservableProperty] private ObservableCollection<ScrollBarVisibility> _vScrollBarVisibilities =
+    [
+        ScrollBarVisibility.Disabled, ScrollBarVisibility.Auto, ScrollBarVisibility.Hidden, ScrollBarVisibility.Visible
+    ];
 
-    public ElasticWrapPanelDemoViewModel()
+    [ObservableProperty] private ScrollBarVisibility _horizontalVisibility = ScrollBarVisibility.Auto;
+    [ObservableProperty] private ScrollBarVisibility _verticalVisibility = ScrollBarVisibility.Auto;
+
+    [ObservableProperty] private bool _isFillHorizontal = true;
+    [ObservableProperty] private bool _isFillVertical = false;
+    [ObservableProperty] private double _itemWidth = 40d;
+    [ObservableProperty] private double _itemHeight = 40d;
+
+    [ObservableProperty] private bool _autoWidth;
+    [ObservableProperty] private bool _autoHeight;
+    [ObservableProperty] private double _itemSelfWidth = double.NaN;
+    [ObservableProperty] private double _itemSelfHeight = double.NaN;
+
+    [ObservableProperty] private ObservableCollection<HorizontalAlignment> _cmbHAligns =
+    [
+        HorizontalAlignment.Stretch,
+        HorizontalAlignment.Left,
+        HorizontalAlignment.Center,
+        HorizontalAlignment.Right
+    ];
+
+    [ObservableProperty] private ObservableCollection<VerticalAlignment> _cmbVAligns =
+    [
+        VerticalAlignment.Stretch,
+        VerticalAlignment.Top,
+        VerticalAlignment.Center,
+        VerticalAlignment.Bottom
+    ];
+
+    [ObservableProperty] private HorizontalAlignment _cmbHAlign = HorizontalAlignment.Stretch;
+    [ObservableProperty] private VerticalAlignment _cmbVAlign = VerticalAlignment.Stretch;
+
+    private double _oldItemSelfWidth;
+    private double _oldItemSelfHeight;
+
+    partial void OnAutoWidthChanged(bool value)
     {
-        SelectedOrientation = Orientation.Horizontal;
-        HorizontalVisibility = VerticalVisibility = ScrollBarVisibility.Auto;
-        Orientations = new ObservableCollection<Orientation>() { Orientation.Horizontal, Orientation.Vertical };
-        HScrollBarVisibilities = new ObservableCollection<ScrollBarVisibility>()
+        if (value)
         {
-            ScrollBarVisibility.Disabled,
-            ScrollBarVisibility.Auto,
-            ScrollBarVisibility.Hidden,
-            ScrollBarVisibility.Visible
-        };
-        VScrollBarVisibilities = new ObservableCollection<ScrollBarVisibility>(HScrollBarVisibilities);
-
-        IsFillHorizontal = true;
-        IsFillVertical = false;
-        ItemWidth = 40d;
-        ItemHeight = 40d;
-
-        ItemSelfWidth = double.NaN;
-        ItemSelfHeight = double.NaN;
-
-        CmbHAligns = new ObservableCollection<HorizontalAlignment>()
+            _oldItemSelfWidth = ItemSelfWidth;
+            ItemSelfWidth = double.NaN;
+        }
+        else
         {
-            HorizontalAlignment.Stretch,
-            HorizontalAlignment.Left,
-            HorizontalAlignment.Center,
-            HorizontalAlignment.Right
-        };
-        CmbVAligns = new ObservableCollection<VerticalAlignment>()
+            ItemSelfWidth = _oldItemSelfWidth;
+        }
+    }
+
+    partial void OnAutoHeightChanged(bool value)
+    {
+        if (value)
         {
-            VerticalAlignment.Stretch,
-            VerticalAlignment.Top,
-            VerticalAlignment.Center,
-            VerticalAlignment.Bottom
-        };
-        CmbHAlign = HorizontalAlignment.Stretch;
-        CmbVAlign = VerticalAlignment.Stretch;
+            _oldItemSelfHeight = ItemSelfHeight;
+            ItemSelfHeight = double.NaN;
+        }
+        else
+        {
+            ItemSelfHeight = _oldItemSelfHeight;
+        }
     }
 }
\ No newline at end of file