Backport CommandBarFlyout shadow fix (#281)

* Port CommandBarFlyout fix * Add USE_INSIDER_SDK * UiElement10 * Update dev/CommandBarFlyout/CommandBarFlyoutCommandBar.cpp Co-Authored-By: kaiguo <guokai.ok@gmail.com> * null check update
microsoft · Feb 8, 2019 · a348e0b · a348e0b
1 parent 5823a84
commit a348e0b
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 28 deletions.
diff --git a/dev/CommandBarFlyout/CommandBarFlyout.cpp b/dev/CommandBarFlyout/CommandBarFlyout.cpp
@@ -134,21 +134,6 @@ CommandBarFlyout::CommandBarFlyout()
         {
             if (auto commandBar = winrt::get_self<CommandBarFlyoutCommandBar>(m_commandBar.get()))
             {
-                if (SharedHelpers::IsThemeShadowAvailable())
-                {
-#if defined(BUILD_WINDOWS)
-                    if (Feature_CommandBarFlyoutShadow::IsEnabled())
-                    {
-                        // Apply a shadow (only if we have a CommandBar worth shadowing)
-                        winrt::Windows::UI::Xaml::Media::ThemeShadow shadow;
-                        commandBar->Shadow(shadow);
-                        bool havePrimaryCommands = PrimaryCommands().Size() > 0;
-                        auto translation = havePrimaryCommands ? winrt::float3{ 0.0f, 0.0f, 32.0f } : winrt::float3{ 0.0f, 0.0f, 0.0f };
-                        commandBar->Translation(translation);
-                    }
-#endif
-                }
-
                 if (commandBar->HasOpenAnimation())
                 {
                     commandBar->PlayOpenAnimation();
@@ -175,6 +160,10 @@ CommandBarFlyout::CommandBarFlyout()
                         });
                     commandBar->IsOpen(false);
                 }
+                //CommandBarFlyoutCommandBar.Closed will be called when
+                //clicking the more (...) button, we clear the translations
+                //here
+                commandBar->ClearShadow();
             }
         }
     });
@@ -186,18 +175,6 @@ CommandBarFlyout::CommandBarFlyout()
         {
             if (auto commandBar = m_commandBar.get())
             {
-                if (SharedHelpers::IsThemeShadowAvailable())
-                {
-#if defined(BUILD_WINDOWS)
-                    if (Feature_CommandBarFlyoutShadow::IsEnabled())
-                    {
-                        // Clear the shadow
-                        auto translation = winrt::float3{ 0.0f, 0.0f, 0.0f };
-                        commandBar.Translation(translation);
-                    }
-#endif
-                }
-
                 if (commandBar.IsOpen())
                 {
                     commandBar.IsOpen(false);

diff --git a/dev/CommandBarFlyout/CommandBarFlyoutCommandBar.cpp b/dev/CommandBarFlyout/CommandBarFlyoutCommandBar.cpp
@@ -33,7 +33,10 @@ CommandBarFlyoutCommandBar::CommandBarFlyoutCommandBar()
     });
 
     SizeChanged({ [this](auto const&, auto const&) { UpdateUI(); } });
-    Closed({ [this](auto const&, auto const&) { m_secondaryItemsRootSized = false; } });
+    Closed({ [this](auto const&, auto const&)
+    {
+        m_secondaryItemsRootSized = false;
+    } });
 
     RegisterPropertyChangedCallback(
         winrt::AppBar::IsOpenProperty(),
@@ -267,6 +270,7 @@ void CommandBarFlyoutCommandBar::UpdateUI(bool useTransitions)
 {
     UpdateTemplateSettings();
     UpdateVisualState(useTransitions);
+    UpdateShadow();
 }
 
 void CommandBarFlyoutCommandBar::UpdateVisualState(bool useTransitions)
@@ -468,3 +472,62 @@ void CommandBarFlyoutCommandBar::UpdateTemplateSettings()
         }
     }
 }
+
+void CommandBarFlyoutCommandBar::UpdateShadow()
+{
+    if (PrimaryCommands().Size() > 0)
+    {
+        AddShadow();
+    }
+    else if (PrimaryCommands().Size() == 0)
+    {
+        ClearShadow();
+    }
+}
+
+void CommandBarFlyoutCommandBar::AddShadow()
+{
+    if (SharedHelpers::IsThemeShadowAvailable())
+    {
+#ifdef USE_INSIDER_SDK
+        //Apply Shadow on the Grid named "ContentRoot", this is the first element below
+        //the clip animation of the commandBar. This guarantees that shadow respects the 
+        //animation
+        winrt::IControlProtected thisAsControlProtected = *this;
+        auto grid = GetTemplateChildT<winrt::Grid>(L"ContentRoot", thisAsControlProtected);
+        if (winrt::IUIElement10 grid_uiElement10 = grid)
+        {
+            if (!grid_uiElement10.Shadow())
+            {
+                winrt::Windows::UI::Xaml::Media::ThemeShadow shadow;
+                grid_uiElement10.Shadow(shadow);
+
+                auto translation = winrt::float3{ grid.Translation().x, grid.Translation().y, 32.0f };
+                grid.Translation(translation);
+            }
+        }
+#endif
+    }
+}
+
+void CommandBarFlyoutCommandBar::ClearShadow()
+{
+    if (SharedHelpers::IsThemeShadowAvailable())
+    {
+#ifdef USE_INSIDER_SDK
+        winrt::IControlProtected thisAsControlProtected = *this;
+        auto grid = GetTemplateChildT<winrt::Grid>(L"ContentRoot", thisAsControlProtected);
+        if (winrt::IUIElement10 grid_uiElement10 = grid)
+        {
+            if (grid_uiElement10.Shadow())
+            {
+                grid_uiElement10.Shadow(nullptr);
+
+                //Undo the elevation
+                auto translation = winrt::float3{ grid.Translation().x, grid.Translation().y, 0.0f };
+                grid.Translation(translation);
+            }
+        }
+#endif
+    }
+}
diff --git a/dev/CommandBarFlyout/CommandBarFlyoutCommandBar.h b/dev/CommandBarFlyout/CommandBarFlyoutCommandBar.h
@@ -23,15 +23,19 @@ class CommandBarFlyoutCommandBar :
     void PlayOpenAnimation();
     bool HasCloseAnimation();
     void PlayCloseAnimation(std::function<void()> onCompleteFunc);
+    void ClearShadow();
 
 private:
     void AttachEventHandlers();
     void DetachEventHandlers(bool useSafeGet = false);
 
+    void AddShadow();
+
     void UpdateFlowsFromAndFlowsTo();
     void UpdateUI(bool useTransitions = true);
     void UpdateVisualState(bool useTransitions);
     void UpdateTemplateSettings();
+    void UpdateShadow();
 
     tracker_ref<winrt::FrameworkElement> m_primaryItemsRoot{ this };
     tracker_ref<winrt::FrameworkElement> m_secondaryItemsRoot{ this };