Fixed incorrect blur in loading sample (#3488)

## Fixes #3359
<!-- Add the relevant issue number after the "#" mentioned above (for ex: Fixes #1234) which will automatically close the issue once the PR is merged. -->

<!-- Add a brief overview here of the feature/bug & fix. -->

## PR Type
What kind of change does this PR introduce?
<!-- Please uncomment one or more that apply to this PR. -->

 - Bugfix
 - Sample app changes
<!-- - Other... Please describe: -->


## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
The blur is incorrectly applied to the loading icon on top of the sample page content:

![image](https://user-images.githubusercontent.com/10199417/93781807-0cb16600-fc2a-11ea-9336-d286bcae3aa0.png)

## What is the new behavior?
<!-- Describe how was this issue resolved or changed? -->
The blur is now applied to the content of the page, with the icon being clearly visible:

![image](https://user-images.githubusercontent.com/10199417/93781861-1fc43600-fc2a-11ea-905d-7e2b82210361.png)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [X] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] ~~Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: <!-- docs PR link -->~~
- [X] Sample in sample app has been added / updated (for bug fixes / features)
    - [ ] ~~Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets)~~
- [ ] ~~Tests for the changes have been added (for bug fixes / features) (if applicable)~~
- [ ] ~~Header has been added to all new source files (run *build/UpdateHeaders.bat*)~~
- [ ] ~~Contains **NO** breaking changes~~

Author: msftbot[bot]

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Loading/LoadingCode.bind

@@ -3,6 +3,7 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:brushes="using:Microsoft.Toolkit.Uwp.UI.Media"
       mc:Ignorable="d">
 
   <Page.Resources>
@@ -50,19 +51,22 @@
         </RichTextBlock>
 
         <controls:AdaptiveGridView
-        Margin="0,12,0,0"
-        x:Name="AdaptiveGridViewControl"
-        ItemHeight="200"
-        DesiredWidth="300"
-        SelectionMode="None"
-        IsItemClickEnabled="False"
-        ItemTemplate="{StaticResource PhotosTemplate}" />
+          Margin="0,12,0,0"
+          x:Name="AdaptiveGridViewControl"
+          ItemHeight="200"
+          DesiredWidth="300"
+          SelectionMode="None"
+          IsItemClickEnabled="False"
+          ItemTemplate="{StaticResource PhotosTemplate}" />
       </StackPanel>
     </ScrollViewer>
 
     <controls:Loading x:Name="LoadingControl">
       <controls:Loading.Background>
-        <SolidColorBrush Color="@[Background:Brush:Black]" Opacity="@[Background Opacity:DoubleSlider:0.7:0-1]" />
+        <brushes:AcrylicBrush BackgroundSource="Backdrop"
+                              TintColor="Black"
+                              TintOpacity="@[Opacity:DoubleSlider:0.4:0.0-1.0]"
+                              BlurAmount="@[BlurAmount:DoubleSlider:8:0.0-24.0]"/>
       </controls:Loading.Background>
       <ContentControl x:Name="LoadingContentControl" />
     </controls:Loading>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Loading/LoadingPage.xaml.cs

@@ -3,7 +3,6 @@
 // See the LICENSE file in the project root for more information.
 
 using System.Threading.Tasks;
-using Microsoft.Toolkit.Uwp.UI.Animations;
 using Microsoft.Toolkit.Uwp.UI.Controls;
 using Microsoft.Toolkit.Uwp.UI.Extensions;
 using Windows.UI.Xaml;
@@ -13,7 +12,6 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
 {
     public sealed partial class LoadingPage : IXamlRenderListener
     {
-        private AdaptiveGridView adaptiveGridViewControl;
         private Loading loadingControl;
         private ContentControl loadingContentControl;
         private ResourceDictionary resources;
@@ -26,14 +24,13 @@ public LoadingPage()
 
         public async void OnXamlRendered(FrameworkElement control)
         {
-            adaptiveGridViewControl = control.FindChildByName("AdaptiveGridViewControl") as AdaptiveGridView;
             loadingControl = control.FindDescendantByName("LoadingControl") as Loading;
             loadingContentControl = control.FindChildByName("LoadingContentControl") as ContentControl;
             resources = control.Resources;
 
-            if (adaptiveGridViewControl != null)
+            if (control.FindChildByName("AdaptiveGridViewControl") is AdaptiveGridView gridView)
             {
-                adaptiveGridViewControl.ItemsSource = await new Data.PhotosDataSource().GetItemsAsync();
+                gridView.ItemsSource = await new Data.PhotosDataSource().GetItemsAsync();
             }
         }
 
@@ -57,22 +54,20 @@ private void Load()
                 }
             });
 
-            SampleController.Current.RegisterNewCommand("Loading control with logo and blurring when requested", async (sender, args) =>
+            SampleController.Current.RegisterNewCommand("Loading control with logo", async (sender, args) =>
             {
                 if (loadingContentControl != null)
                 {
                     loadingContentControl.ContentTemplate = resources["LogoTemplate"] as DataTemplate;
-                    await loadingContentControl.Blur(2, 100).StartAsync();
                     await ShowLoadingDialogAsync();
-                    await loadingContentControl.Blur(0, 0).StartAsync();
                 }
             });
         }
 
         private async Task ShowLoadingDialogAsync()
         {
             loadingControl.IsLoading = true;
-            await Task.Delay(3000);
+            await Task.Delay(5000);
             loadingControl.IsLoading = false;
         }
     }