From 1ae0585325ddad21ba16208cbf9fd77822834893 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9B=E5=B0=98=E7=A9=BA=E5=BF=A7?=
 <wckfxxjstdwckyxphdhqxg@outlook.com>
Date: Fri, 18 Apr 2025 19:30:32 +0800
Subject: [PATCH] feat: enhance SplitViewDemo with dynamic bindings and new
 layout structure

---
 .../Pages/SplitViewDemo.axaml                 | 306 ++++++++++++------
 .../Pages/SplitViewDemo.axaml.cs              |   2 +-
 2 files changed, 204 insertions(+), 104 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
index 2492ead..c662bf2 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
@@ -21,8 +21,7 @@
                         Content="IsPaneOpen" />
                     <ToggleSwitch
                         Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton"
-                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
+                        Name="PaneOpenButton" />
 
                     <Label
                         Grid.Row="1" Grid.Column="0"
@@ -30,8 +29,7 @@
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
                         Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton"
-                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
+                        Name="UseLightDismissOverlayModeButton" />
 
                     <Label
                         Grid.Row="2" Grid.Column="0"
@@ -39,9 +37,9 @@
                         Content="Placement" />
                     <ToggleSwitch
                         Grid.Row="2" Grid.Column="1"
+                        Name="PanePlacementButton"
                         OffContent="Left"
-                        OnContent="Right"
-                        IsChecked="{Binding #SplitView.PanePlacement}" />
+                        OnContent="Right" />
 
                     <Label
                         Grid.Row="3" Grid.Column="0"
@@ -51,8 +49,8 @@
                         Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{Binding DisplayModes}"
-                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
+                        ItemsSource="{x:Static pages:SplitViewDemoViewModel.DisplayModes}"
+                        SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
 
                     <Label
                         Grid.Row="4" Grid.Column="0"
@@ -65,7 +63,7 @@
                         Minimum="0"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.CompactPaneLength}" />
+                        Value="48" />
 
                     <Label
                         Grid.Row="5" Grid.Column="0"
@@ -78,105 +76,207 @@
                         Minimum="128"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.OpenPaneLength}" />
+                        Value="256" />
                 </Grid>
             </Border>
-            <Border
-                Grid.Column="0"
-                BorderBrush="{DynamicResource SemiGrey1}"
-                BorderThickness="1">
-                <SplitView
-                    Name="SplitView"
-                    DisplayMode="CompactOverlay"
-                    CompactPaneLength="48"
-                    OpenPaneLength="256">
-                    <SplitView.Background>
-                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                            <GradientStop Color="#6b4c1b" Offset="0" />
-                            <GradientStop Color="#291e10" Offset="1" />
-                        </LinearGradientBrush>
-                    </SplitView.Background>
-                    <SplitView.Pane>
-                        <Grid RowDefinitions="Auto,*,Auto">
-                            <TextBlock
-                                Grid.Row="0"
-                                Name="PaneHeader"
-                                Margin="8,12"
-                                FontWeight="Bold"
-                                Text="Playlist" />
-                            <ListBox
-                                Grid.Row="1"
-                                ItemsSource="{Binding Songs}" />
-                            <ToggleSwitch
-                                Grid.Row="2"
-                                Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                                Content="{StaticResource SemiIconSidebar}"
-                                HorizontalAlignment="Left"
-                                IsChecked="{Binding #SplitView.IsPaneOpen}">
-                            </ToggleSwitch>
-                        </Grid>
-                    </SplitView.Pane>
-
-                    <Panel>
-                        <Panel.Styles>
-                            <Style Selector="Image#AlbumCover">
-                                <Style.Animations>
-                                    <Animation IterationCount="Infinite" Duration="0:0:40">
-                                        <KeyFrame Cue="0%">
-                                            <Setter Property="RotateTransform.Angle" Value="0" />
-                                        </KeyFrame>
-                                        <KeyFrame Cue="100%">
-                                            <Setter Property="RotateTransform.Angle" Value="360" />
-                                        </KeyFrame>
-                                    </Animation>
-                                </Style.Animations>
-                            </Style>
-                        </Panel.Styles>
-                        <Image
-                            Source="/Assets/WORLD.png"
-                            Name="AlbumCover"
-                            Width="200"
-                            Height="200" />
-                        <Arc
-                            Width="290"
-                            Height="290"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="45">
-                            <Arc.Stroke>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                    <GradientStop Color="#010101" Offset="0" />
-                                    <GradientStop Color="#363636" Offset="0.5" />
-                                    <GradientStop Color="#010101" Offset="1" />
+            <TabControl Grid.Column="0">
+                <TabItem Header="Default">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
                                 </LinearGradientBrush>
-                            </Arc.Stroke>
-                        </Arc>
-                        <Arc
-                            Width="294"
-                            Height="294"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="4"
-                            Stroke="Black" />
-                        <Arc
-                            Width="310"
-                            Height="310"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="10"
-                            Stroke="#C6CACD"
-                            Opacity="0.1" />
-                    </Panel>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,*,Auto">
+                                    <TextBlock
+                                        Grid.Row="0"
+                                        Name="PaneHeader"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="1"
+                                        ItemsSource="{Binding Songs}" />
+                                    <ToggleSwitch
+                                        Grid.Row="2"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView.IsPaneOpen}">
+                                    </ToggleSwitch>
+                                </Grid>
+                            </SplitView.Pane>
 
-                </SplitView>
-            </Border>
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Name="AlbumCover"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
 
+                        </SplitView>
+                    </Border>
+                </TabItem>
+                <TabItem Header="VerticalSplitView">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Theme="{DynamicResource VerticalSplitView}"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
+                                </LinearGradientBrush>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,*,Auto">
+                                    <TextBlock
+                                        Grid.Row="0"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="1"
+                                        ItemsSource="{Binding Songs}" />
+                                    <ToggleSwitch
+                                        Grid.Row="2"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView.IsPaneOpen}">
+                                    </ToggleSwitch>
+                                </Grid>
+                            </SplitView.Pane>
+
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
+
+                        </SplitView>
+                    </Border>
+                </TabItem>
+            </TabControl>
         </Grid>
     </Border>
 </UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
index 2fb52a5..1cb1f66 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
@@ -34,7 +34,7 @@ public class SplitViewDemoViewModel : ObservableObject
         "世界所有的烂漫",
     ];
 
-    public ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    public static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
     [
         SplitViewDisplayMode.Inline,
         SplitViewDisplayMode.CompactInline,