From 1b1caa1a35207379bfb01810b0936881e30abd8e Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 30 Jan 2023 01:52:05 +0800
Subject: [PATCH 1/2] feat: Add Splitview.

---
 .../Pages/SplitViewDemo.axaml                 | 152 +++++++++++
 .../Pages/SplitViewDemo.axaml.cs              |  18 ++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   3 +
 .../Semi.Avalonia.Demo/Views/MainWindow.axaml |   2 -
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/SplitView.axaml    | 251 ++++++++++++++++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/SplitView.axaml              |  12 +
 8 files changed, 438 insertions(+), 2 deletions(-)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/SplitView.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/SplitView.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
new file mode 100644
index 0000000..5d15f93
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
@@ -0,0 +1,152 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.SplitViewDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <Border>
+        <Grid ColumnDefinitions="*,400">
+            <StackPanel
+                Grid.Column="1"
+                Margin="5"
+                Orientation="Vertical"
+                Spacing="4">
+                <ToggleButton
+                    Name="PaneOpenButton"
+                    Content="IsPaneOpen"
+                    IsChecked="{Binding IsPaneOpen, ElementName=SplitView}" />
+
+                <ToggleButton
+                    Name="UseLightDismissOverlayModeButton"
+                    Content="UseLightDismissOverlayMode"
+                    IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
+
+                <ToggleSwitch
+                    Content="Placement"
+                    IsChecked="{Binding !IsLeft}"
+                    OffContent="Left"
+                    OnContent="Right" />
+
+                <TextBlock Text="DisplayMode" />
+                <ComboBox
+                    Name="DisplayModeSelector"
+                    Width="170"
+                    Margin="10"
+                    SelectedIndex="{Binding DisplayMode}">
+                    <ComboBoxItem>Inline</ComboBoxItem>
+                    <ComboBoxItem>CompactInline</ComboBoxItem>
+                    <ComboBoxItem>Overlay</ComboBoxItem>
+                    <ComboBoxItem>CompactOverlay</ComboBoxItem>
+                </ComboBox>
+
+                <TextBlock Text="PaneBackground" />
+                <ComboBox
+                    Name="PaneBackgroundSelector"
+                    Width="170"
+                    Margin="10"
+                    SelectedIndex="0">
+                    <ComboBoxItem Tag="White">White</ComboBoxItem>
+                    <ComboBoxItem Tag="Red">Red</ComboBoxItem>
+                    <ComboBoxItem Tag="Blue">Blue</ComboBoxItem>
+                    <ComboBoxItem Tag="Green">Green</ComboBoxItem>
+                </ComboBox>
+
+                <TextBlock Text="{Binding Value, ElementName=OpenPaneLengthSlider, StringFormat='{}OpenPaneLength: {0}'}" />
+                <Slider
+                    Name="OpenPaneLengthSlider"
+                    Width="150"
+                    Maximum="500"
+                    Minimum="128"
+                    Value="256" />
+
+                <TextBlock Text="{Binding Value, ElementName=CompactPaneLengthSlider, StringFormat='{}CompactPaneLength: {0}'}" />
+                <Slider
+                    Name="CompactPaneLengthSlider"
+                    Width="150"
+                    Maximum="128"
+                    Minimum="24"
+                    Value="48" />
+            </StackPanel>
+            <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1">
+                <!--  {Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}  -->
+                <SplitView
+                    Name="SplitView"
+                    CompactPaneLength="{Binding Value, ElementName=CompactPaneLengthSlider}"
+                    DisplayMode="CompactOverlay"
+                    OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}"
+                    PaneBackground="{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}"
+                    PanePlacement="{Binding PanePlacement}">
+                    <SplitView.Pane>
+                        <Grid RowDefinitions="Auto,Auto,*,Auto">
+                            <TextBlock
+                                Name="PaneHeader"
+                                Margin="5,12,0,0"
+                                FontWeight="Bold"
+                                Text="PANE CONTENT" />
+                            <ComboBox Grid.Row="1" Width="150">
+                                <ComboBoxItem Content="Item1" />
+                                <ComboBoxItem Content="Item2" />
+                                <ComboBoxItem Content="Item3" />
+                            </ComboBox>
+                            <ListBoxItem
+                                Grid.Row="2"
+                                Margin="0,10"
+                                VerticalAlignment="Top">
+                                <StackPanel Orientation="Horizontal">
+                                    <!--  Path glyph from materialdesignicons.com  -->
+                                    <Border Width="48">
+                                        <Viewbox
+                                            Width="24"
+                                            Height="24"
+                                            HorizontalAlignment="Left">
+                                            <Canvas Width="24" Height="24">
+                                                <Path Data="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" Fill="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+                                            </Canvas>
+                                        </Viewbox>
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center" Text="People" />
+                                </StackPanel>
+                            </ListBoxItem>
+                            <TextBlock
+                                Grid.Row="3"
+                                Margin="60,12"
+                                Text="Item at bottom" />
+                        </Grid>
+                    </SplitView.Pane>
+
+                    <Grid>
+                        <Grid.Styles>
+                            <Style Selector="TextBlock">
+                                <Setter Property="FontSize" Value="14" />
+                                <Setter Property="FontWeight" Value="700" />
+                            </Style>
+                        </Grid.Styles>
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Text="SplitViewContent" />
+                        <TextBlock Text="SplitViewContent" TextAlignment="Left" />
+                        <TextBlock
+                            HorizontalAlignment="Right"
+                            Text="SplitViewContent"
+                            TextAlignment="Left" />
+                        <TextBlock
+                            VerticalAlignment="Bottom"
+                            Text="SplitViewContent"
+                            TextAlignment="Left" />
+                        <TextBlock
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Bottom"
+                            Text="SplitViewContent"
+                            TextAlignment="Left" />
+                    </Grid>
+
+                </SplitView>
+            </Border>
+
+        </Grid>
+    </Border>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
new file mode 100644
index 0000000..e8a834f
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class SplitViewDemo : UserControl
+{
+    public SplitViewDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 986096e..8e2ffe4 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -81,6 +81,9 @@
         <TabItem Header="Slider">
             <pages:SliderDemo />
         </TabItem>
+        <TabItem Header="SplitView">
+            <pages:SplitViewDemo />
+        </TabItem>
         <TabItem Header="TabControl">
             <pages:TabControlDemo />
         </TabItem>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainWindow.axaml b/demo/Semi.Avalonia.Demo/Views/MainWindow.axaml
index d635818..dd78df4 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainWindow.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainWindow.axaml
@@ -8,8 +8,6 @@
     Title="Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    ExtendClientAreaChromeHints="Default"
-    ExtendClientAreaToDecorationsHint="True"
     Icon="/Assets/avalonia-logo.ico"
     mc:Ignorable="d">
     <views:MainView />
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 13b75f8..866cc49 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -35,6 +35,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ScrollViewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Slider.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/SplitButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/SplitView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabStrip.axaml" />
diff --git a/src/Semi.Avalonia/Controls/SplitView.axaml b/src/Semi.Avalonia/Controls/SplitView.axaml
new file mode 100644
index 0000000..1f990f7
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/SplitView.axaml
@@ -0,0 +1,251 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="using:System">
+    <!--  Add Resources Here  -->
+
+    <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
+        <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
+        <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
+        <Setter Property="PaneBackground" Value="White" />
+
+        <Style Selector="^:left">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="SplitView">
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.ColumnDefinitions>
+                            <!--  why is this throwing a binding error?  -->
+                            <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            HorizontalAlignment="Left"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                x:Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Width="1"
+                                HorizontalAlignment="Right"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                x:Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle
+                                Name="LightDismissLayer"
+                                Fill="Transparent"
+                                IsVisible="False" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.Column" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <!--  ColumnSpan should be 2  -->
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:right">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                        </Grid.ColumnDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            HorizontalAlignment="Right"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                x:Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Width="1"
+                                HorizontalAlignment="Left"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                x:Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle Name="LightDismissLayer" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.ColumnSpan" Value="2" />
+                    <Setter Property="Grid.Column" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Grid.ColumnSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.ColumnSpan" Value="2" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:open">
+            <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Width"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="1.0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:closed">
+            <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Width"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="0.0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:lightdismiss /template/ Rectangle#LightDismissLayer">
+            <Setter Property="Fill" Value="#99000000" />
+        </Style>
+        <Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        <Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 784b7f5..516e71e 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -26,6 +26,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ScrollViewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Slider.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/SplitButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/SplitView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/SplitView.axaml b/src/Semi.Avalonia/Themes/Light/SplitView.axaml
new file mode 100644
index 0000000..2588ea1
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/SplitView.axaml
@@ -0,0 +1,12 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="using:System">
+    <!--  Add Resources Here  -->
+    <x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
+    <x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
+    <sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
+    <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
+    <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
+    <SolidColorBrush x:Key="SplitViewSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
+</ResourceDictionary>

From 30af6dae40bd9559c0ec20f8b4df97bdddcfaf7c Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 30 Jan 2023 01:56:04 +0800
Subject: [PATCH 2/2] feat: Move pane background to resource.

---
 src/Semi.Avalonia/Controls/SplitView.axaml     | 2 +-
 src/Semi.Avalonia/Themes/Light/SplitView.axaml | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Semi.Avalonia/Controls/SplitView.axaml b/src/Semi.Avalonia/Controls/SplitView.axaml
index 1f990f7..2f59750 100644
--- a/src/Semi.Avalonia/Controls/SplitView.axaml
+++ b/src/Semi.Avalonia/Controls/SplitView.axaml
@@ -7,7 +7,7 @@
     <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
-        <Setter Property="PaneBackground" Value="White" />
+        <Setter Property="PaneBackground" Value="{DynamicResource SplitViewPaneBackground}" />
 
         <Style Selector="^:left">
             <Setter Property="Template">
diff --git a/src/Semi.Avalonia/Themes/Light/SplitView.axaml b/src/Semi.Avalonia/Themes/Light/SplitView.axaml
index 2588ea1..c6b235d 100644
--- a/src/Semi.Avalonia/Themes/Light/SplitView.axaml
+++ b/src/Semi.Avalonia/Themes/Light/SplitView.axaml
@@ -9,4 +9,5 @@
     <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
     <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
     <SolidColorBrush x:Key="SplitViewSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="SplitViewPaneBackground" Color="White" />
 </ResourceDictionary>