Merge pull request #4260 from michael-hawker/shadow-docs

Update AttachedShadow example and future doc links

Author: michael-hawker

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Shadows/AttachedShadowCompositionXaml.bind

@@ -20,11 +20,11 @@
 
   <ScrollViewer>
     <Grid>
-      <!-- The ShadowTarget Grid here is a *sibling* element behind where our elements which will cast
+      <!-- The ShadowTarget Border here is a *sibling* element behind where our elements which will cast
            shadows are located, this is important as otherwise if we used a parent element the
            shadows would appear on top of our elements instead!
            It is also placed within the ScrollViewer here so shadows move with their elements. -->
-      <Grid x:Name="ShadowTarget"/>
+      <Border x:Name="ShadowTarget"/>
       <StackPanel Spacing="32" VerticalAlignment="Center">
         <!-- All buttons on this page have the shadow from the common style!
              The Shadow definition is Shared! -->
@@ -33,6 +33,10 @@
         <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
                Height="100" Width="100"
                Source="ms-appx:///Assets/Photos/Owl.jpg"/>
+        <!-- The AttachedDropShadow supports masking of text! -->
+        <TextBlock ui:Effects.Shadow="{StaticResource CommonShadow}"
+                   Text="This is some text with a Shadow!"
+                   HorizontalAlignment="Center"/>
         <!-- You can still apply a Shadow directly and even use binding with it to manipulate at runtime! -->
         <Rectangle RadiusX="32" RadiusY="32"
                    Height="100" Width="100"
@@ -41,8 +45,10 @@
             <ImageBrush ImageSource="ms-appx:///Assets/Photos/Owl.jpg"/>
           </Rectangle.Fill>
           <ui:Effects.Shadow>
+            <!-- If doing a rectangular/rounded shadow, set IsMasked to False for better performance or switch to AttachedCardShadow -->
             <ui:AttachedDropShadow BlurRadius="@[BlurRadius:DoubleSlider:8.0:0.0-10.0]"
                                    CornerRadius="32"
+                                   IsMasked="False"
                                    Color="@[Color:Brush:Black]"
                                    Offset="@[Offset:Vector3:4,4]"
                                    Opacity="@[Opacity:DoubleSlider:1.0:0.0-1.0]"

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -193,7 +193,7 @@
         "CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI/Shadows",
         "XamlCodeFile": "/SamplePages/Shadows/AttachedShadowCompositionXaml.bind",
         "Icon": "/SamplePages/Shadows/DropShadowPanel.png",
-        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/DropShadowPanel.md"
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/helpers/AttachedShadows.md"
       },
       {
         "Name": "AttachedCardShadow (Win2D)",
@@ -202,7 +202,7 @@
         "CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Media/Shadows",
         "XamlCodeFile": "/SamplePages/Shadows/AttachedShadowWin2DXaml.bind",
         "Icon": "/SamplePages/Shadows/DropShadowPanel.png",
-        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/DropShadowPanel.md",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/helpers/AttachedShadows.md",
         "BadgeUpdateVersionRequired": "May 2019 update required",
         "ApiCheck": "Windows.UI.Composition.CompositionVisualSurface"
       },
@@ -670,7 +670,7 @@
         "CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Animations/Xaml/Shadows",
         "XamlCodeFile": "/SamplePages/Animations/Shadows/AnimatedCardShadowXaml.bind",
         "Icon": "/SamplePages/Shadows/DropShadowPanel.png",
-        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/ConnectedAnimations.md"
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/helpers/AttachedShadows.md"
       }
     ]
   },