From 1d15d1b51343137a24171002b6f07ac98517b1af Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Sun, 10 Jul 2022 00:04:29 +0200
Subject: [PATCH] Ported SplitView to ControlTheme.

---
 .../Controls/FluentControls.xaml              |   2 +-
 .../Controls/SplitView.xaml                   | 444 +++++++++---------
 2 files changed, 231 insertions(+), 215 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
index 3e4361465c..fc89d7c21e 100644
--- a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
@@ -39,6 +39,7 @@
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollBar.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Separator.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitView.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabControl.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabItem.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabStrip.xaml" />
@@ -72,7 +73,6 @@
     <!--  TabControl needs to come after TabStrip as it redefines the inner TabStrip.ItemsPanel  -->
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TreeViewItem.xaml" />
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitButton.xaml" />
-    <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitView.xaml" />
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/UserControl.xaml" />
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml" />
     <Styles.Resources />
diff --git a/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml b/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
index 6b9b94852f..9feb6c7fc6 100644
--- a/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
@@ -1,4 +1,4 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="using:System">
   <Design.PreviewWith>
@@ -15,219 +15,235 @@
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <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>
-    <!-- Not used here (directly), but preserving for reference
-        <x:String x:Key="SplitViewPaneAnimationOpenPreDuration">00:00:00.19999</x:String>-->
-  </Styles.Resources>
-
-  <Style Selector="SplitView">
+  <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>
+
+  <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
     <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
     <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
     <Setter Property="PaneBackground" Value="{DynamicResource SystemControlPageBackgroundChromeLowBrush}" />
-  </Style>
-
-  <!-- Left -->
-  <Style Selector="SplitView:left">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <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" Background="{TemplateBinding PaneBackground}"
-                 ClipToBounds="True"
-                 HorizontalAlignment="Left"
-                 ZIndex="100">
-            <ContentPresenter x:Name="PART_PanePresenter" Content="{TemplateBinding Pane}" ContentTemplate="{TemplateBinding PaneTemplate}" />
-            <Rectangle Name="HCPaneBorder" Fill="{DynamicResource SystemControlForegroundTransparentBrush}" Width="1" HorizontalAlignment="Right"  />
-          </Panel>
-
-          <Panel Name="ContentRoot">
-            <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
-            <Rectangle Name="LightDismissLayer"/>
-          </Panel>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <!-- Overlay -->
-  <Style Selector="SplitView:overlay:left /template/ Panel#PART_PaneRoot">
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-    <!-- ColumnSpan should be 2 -->
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-    <Setter Property="Grid.Column" Value="0"/>
-  </Style>
-  <Style Selector="SplitView:overlay:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="2"/>
-  </Style>
-
-  <!-- CompactInline -->
-  <Style Selector="SplitView:compactinline:left /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="SplitView:compactinline:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- CompactOverlay -->
-  <Style Selector="SplitView:compactoverlay:left /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="SplitView:compactoverlay:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Inline -->
-  <Style Selector="SplitView:inline:left /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="SplitView:inline:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Right -->
-  <Style Selector="SplitView: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" Background="{TemplateBinding PaneBackground}"
-                 ClipToBounds="True"
-                 HorizontalAlignment="Right"
-                 ZIndex="100">
-            <ContentPresenter x:Name="PART_PanePresenter" Content="{TemplateBinding Pane}" ContentTemplate="{TemplateBinding PaneTemplate}"/>
-            <Rectangle Name="HCPaneBorder"
-                       Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
-                       Width="1" HorizontalAlignment="Left"  />
-          </Panel>
-
-          <Panel Name="ContentRoot">
-            <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
-            <Rectangle Name="LightDismissLayer"/>
-          </Panel>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <!-- Overlay -->
-  <Style Selector="SplitView:overlay:right /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="SplitView:overlay:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="2"/>
-  </Style>
-
-  <!-- CompactInline -->
-  <Style Selector="SplitView:compactinline:right /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="SplitView:compactinline:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- CompactOverlay -->
-  <Style Selector="SplitView:compactoverlay:right /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="SplitView:compactoverlay:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Inline -->
-  <Style Selector="SplitView:inline:right /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="SplitView:inline:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Open/Close Pane animation  -->
-  <Style Selector="SplitView:open /template/ Panel#PART_PaneRoot">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
-  </Style>
-  <Style Selector="SplitView:open /template/ Rectangle#LightDismissLayer">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Opacity" Value="1.0"/>
-  </Style>
-
-  <Style Selector="SplitView:closed /template/ Panel#PART_PaneRoot">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:closed /template/ Rectangle#LightDismissLayer">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Opacity" Value="0.0"/>
-  </Style>
-
-  <Style Selector="SplitView /template/ Rectangle#LightDismissLayer">
-    <Setter Property="IsVisible" Value="False"/>
-    <Setter Property="Fill" Value="Transparent" />
-  </Style>
-  <Style Selector="SplitView:lightdismiss /template/ Rectangle#LightDismissLayer">
-    <Setter Property="Fill" Value="{DynamicResource SplitViewLightDismissOverlayBackground}" />
-  </Style>
-
-  <Style Selector="SplitView:overlay:open /template/ Rectangle#LightDismissLayer">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-  <Style Selector="SplitView:compactoverlay:open /template/ Rectangle#LightDismissLayer">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-
-</Styles>
+
+    <Style Selector="^:left">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <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"
+                   Background="{TemplateBinding PaneBackground}"
+                   ClipToBounds="True"
+                   HorizontalAlignment="Left"
+                   ZIndex="100">
+              <ContentPresenter x:Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+              <Rectangle Name="HCPaneBorder"
+                         Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
+                         Width="1"
+                         HorizontalAlignment="Right"  />
+            </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" Background="{TemplateBinding PaneBackground}"
+                   ClipToBounds="True"
+                   HorizontalAlignment="Right"
+                   ZIndex="100">
+              <ContentPresenter x:Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}"/>
+              <Rectangle Name="HCPaneBorder"
+                         Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
+                         Width="1" HorizontalAlignment="Left"  />
+            </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 Property="Width"
+                              Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
+                              Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+      </Style>
+      <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Opacity"
+                              Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
+                              Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Opacity" Value="1.0"/>
+      </Style>
+    </Style>
+
+    <Style Selector="^:closed">
+      <Style Selector="^ /template/ Panel#PART_PaneRoot">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+      </Style>
+      <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Opacity" Value="0.0"/>
+      </Style>
+    </Style>
+
+    <Style Selector="^:lightdismiss /template/ Rectangle#LightDismissLayer">
+      <Setter Property="Fill" Value="{DynamicResource SplitViewLightDismissOverlayBackground}" />
+    </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>