WIP: Make the control sticky and add a floaty shadow

src/cascadia/TerminalSettingsEditor/Profiles_Appearance.cpp

@@ -52,6 +52,9 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         // The Appearances object handles updating the values in the settings UI, but
         // we still need to listen to the changes here just to update the preview control
         _AppearanceViewModelChangedRevoker = _Profile.DefaultAppearance().PropertyChanged(winrt::auto_revoke, { this, &Profiles_Appearance::_onProfilePropertyChanged });
+
+        ControlShadow().Receivers().Clear();
+        ControlShadow().Receivers().Append(ScrollContainer());
     }
 
     void Profiles_Appearance::OnNavigatedFrom(const NavigationEventArgs& /*e*/)
@@ -91,4 +94,12 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         _previewConnection->DisplayPowerlineGlyphs(_looksLikePowerlineFont());
         _previewControl.UpdateControlSettings(settings, settings);
     }
+
+    void Profiles_Appearance::ViewChanging(const IInspectable& sender, const Controls::ScrollViewerViewChangingEventArgs& e)
+    {
+        double in = std::min(16.0, e.NextView().VerticalOffset());
+        double f = (5. / 16.) * in;
+        ControlContainer().Translation({ 0, 0, gsl::narrow_cast<float>(f) });
+        HasScrollViewer<Profiles_Appearance>::ViewChanging(sender, e);
+    }
 }

src/cascadia/TerminalSettingsEditor/Profiles_Appearance.h

@@ -22,6 +22,9 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         Editor::IHostedInWindow WindowRoot() { return _windowRoot; };
 
+        void ViewChanging(const winrt::Windows::Foundation::IInspectable& sender,
+                          const winrt::Windows::UI::Xaml::Controls::ScrollViewerViewChangingEventArgs& /*e*/);
+
         WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
         WINRT_PROPERTY(Editor::ProfileViewModel, Profile, nullptr);
 

src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml

@@ -33,6 +33,7 @@
 
     <Grid>
         <Grid.RowDefinitions>
+            <RowDefinition Height="auto" />
             <RowDefinition Height="auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
@@ -41,20 +42,24 @@
                    Margin="{StaticResource StandardIndentMargin}"
                    Style="{StaticResource DisclaimerStyle}"
                    Visibility="{x:Bind Profile.IsBaseLayer}" />
-        <ScrollViewer Grid.Row="1"
-                      ViewChanging="ViewChanging">
+        <!--  Control Preview  -->
+        <Border Grid.Row="1" MaxWidth="{StaticResource StandardControlMaxWidth}"
+            Padding="{StaticResource StandardIndentMargin}" x:Name="ControlContainer">
+            <Border.Shadow>
+                <ThemeShadow x:Name="ControlShadow" />
+            </Border.Shadow>
+            <Border x:Name="ControlPreview"
+                    Width="400"
+                    Height="180"
+                    Margin="0,0,0,12"
+                    HorizontalAlignment="Left"
+                    BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
+                    BorderThickness="1" />
+        </Border>
+        <ScrollViewer Grid.Row="2"
+                      ViewChanging="ViewChanging"
+                      x:Name="ScrollContainer">
             <StackPanel Style="{StaticResource SettingsStackStyle}">
-                <!--  Control Preview  -->
-                <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
-                    <Border x:Name="ControlPreview"
-                            Width="400"
-                            Height="180"
-                            Margin="0,0,0,12"
-                            HorizontalAlignment="Left"
-                            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                            BorderThickness="1" />
-                </Border>
-
                 <local:Appearances Appearance="{x:Bind Profile.DefaultAppearance, Mode=OneWay}"
                                    SourceProfile="{x:Bind Profile, Mode=OneWay}"
                                    WindowRoot="{x:Bind WindowRoot, Mode=OneTime}" />