Improved shadow for the Ribbon

Author: Yair Aichenbaum

Files/Controls/RibbonArea.xaml

@@ -1822,13 +1822,14 @@
                         </Button.KeyboardAccelerators>
                     </Button>
                 </StackPanel>
-                
-                
+
+
                 <Grid
                     Grid.Column="1"
-                    Padding="4,0,4,0" Height="34"
+                    Height="40"
+                    Padding="4,0,4,0"
                     VerticalAlignment="Center">
-                    
+
                     <TextBox
                         x:Name="VisiblePath"
                         Padding="4"
@@ -1847,7 +1848,7 @@
                         ScrollViewer.VerticalScrollBarVisibility="Hidden"
                         Text="{x:Bind local:App.CurrentInstance.PathControlDisplayText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                         Visibility="Collapsed" />
-                    
+
                     <Grid
                         x:Name="ClickablePath"
                         Height="32.5"
@@ -1866,13 +1867,13 @@
                                     Text="Edit address" />
                             </MenuFlyout>
                         </Grid.ContextFlyout>
-                        
+
                         <ListView
                             x:Name="PathViewInteract"
-                            x:FieldModifier="public"
                             VerticalAlignment="Stretch"
                             HorizontalContentAlignment="Stretch"
                             VerticalContentAlignment="Stretch"
+                            x:FieldModifier="public"
                             Background="{ThemeResource TextControlBackground}"
                             CanReorderItems="False"
                             IsItemClickEnabled="True"
@@ -1908,11 +1909,11 @@
                                 </ItemsPanelTemplate>
                             </ListView.ItemsPanel>
                         </ListView>
-                        
+
                     </Grid>
-                    
+
                 </Grid>
-                
+
                 <Custom:GridSplitter
                     x:Name="SearchBoxResizer"
                     Grid.Column="1"

Files/ProHome.xaml

@@ -13,9 +13,9 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     x:Name="ProHomeInstance"
-    NavigationCacheMode="Disabled"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     Loaded="Page_Loaded"
+    NavigationCacheMode="Disabled"
     mc:Ignorable="d">
     <Page.Resources>
         <ResourceDictionary>
@@ -82,7 +82,7 @@
                     </Setter.Value>
                 </Setter>
             </Style>
-            
+
         </ResourceDictionary>
     </Page.Resources>
 
@@ -92,29 +92,15 @@
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <StackPanel Grid.Row="0" Orientation="Vertical">
-            <controls:RibbonArea
-                x:Name="RibbonArea"
-                x:FieldModifier="public"
-                />
-            <Windows10version1903:Grid>
-                <Grid.Resources>
-                    <Windows10version1903:ThemeShadow x:Name="themeShadow" />
-                </Grid.Resources>
-                <Grid
-                    x:Name="ShadowReceiver"
-                    Height="8"
-                    Background="Transparent" />
-                <Grid
-                    x:Name="ShadowCaster"
-                    Height="4"
-                    VerticalAlignment="Top"
-                    Windows10version1903:Shadow="{x:Bind themeShadow}"
-                    Background="{ThemeResource RibbonBackgroundColor}"
-                    Canvas.ZIndex="2"
-                    Translation="0,0,4" />
-            </Windows10version1903:Grid>
-        </StackPanel>
+        <Custom:DropShadowPanel
+            Height="Auto"
+            HorizontalAlignment="Stretch"
+            HorizontalContentAlignment="Stretch"
+            Canvas.ZIndex="100"
+            OffsetY="3"
+            ShadowOpacity=".1">
+            <controls:RibbonArea x:Name="RibbonArea" x:FieldModifier="public" />
+        </Custom:DropShadowPanel>
 
         <SplitView
             x:Name="splitView"
@@ -128,7 +114,7 @@
             PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}">
             <SplitView.Pane>
                 <ScrollViewer Margin="0,0,0,0" VerticalScrollBarVisibility="Auto">
-                    <controls:Sidebar x:FieldModifier="public" x:Name="SidebarControl"/>
+                    <controls:Sidebar x:Name="SidebarControl" x:FieldModifier="public" />
                 </ScrollViewer>
             </SplitView.Pane>
 

Files/ProHome.xaml.cs

@@ -138,11 +138,6 @@ public ProHome()
             this.InitializeComponent();
             RibbonArea.VisiblePath.Text = "New tab";
 
-            if (ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.ThemeShadow"))
-            {
-                themeShadow.Receivers.Add(ShadowReceiver);
-            }
-
             // Acrylic sidebar
             var localSettings = ApplicationData.Current.LocalSettings;
             if (localSettings.Values["acrylicSidebar"] != null && localSettings.Values["acrylicSidebar"].Equals(true))