Add more samples (though one doesn't work for some reason with raw Border)

Author: michael-hawker

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

@@ -6,19 +6,69 @@
   xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
   xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
   mc:Ignorable="d">
-  
-  <!-- TODO: Show using as Resource as well... -->
 
-  <Grid>
-    <Button Content="Hello Shadows!" HorizontalAlignment="Center" VerticalAlignment="Center"
-            CornerRadius="8">
-      <ui:Effects.Shadow>
-        <media:AttachedCardShadow BlurRadius="@[BlurRadius:DoubleSlider:8.0:0.0-10.0]"
-                                  CornerRadius="8"
-                                  Color="@[Color:Brush:Black]"
-                                  Offset="@[Offset:Vector3:16,16]"
-                                  Opacity="@[Opacity:DoubleSlider:1.0:0.0-1.0]"/>
-      </ui:Effects.Shadow>
-    </Button>
-  </Grid>
-</Page>
+  <!-- TODO: Animation-->
+  <Page.Resources>
+    <media:AttachedCardShadow x:Key="CommonShadow" Offset="4"/>
+
+    <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
+      <Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}"/>
+      <Setter Property="HorizontalAlignment" Value="Center"/>
+    </Style>
+  </Page.Resources>
+
+  <ScrollViewer>
+    <StackPanel Spacing="32" VerticalAlignment="Center">
+      <!-- All buttons on this page have the shadow from the common style!
+           The Shadow definition is Shared! -->
+      <Button Content="I Have a Shadow!"/>
+      <!-- Can apply the same shadow to any type of element! -->
+      <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
+             Height="100" Width="100"
+             Source="ms-appx:///Assets/Photos/Owl.jpg"/>
+      <!-- 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"
+                 Stroke="Blue" StrokeThickness="1">
+        <Rectangle.Fill>
+          <ImageBrush ImageSource="ms-appx:///Assets/Photos/Owl.jpg"/>
+        </Rectangle.Fill>
+        <ui:Effects.Shadow>
+          <media:AttachedCardShadow BlurRadius="@[BlurRadius:DoubleSlider:8.0:0.0-10.0]"
+                                    CornerRadius="32"
+                                    Color="@[Color:Brush:Black]"
+                                    Offset="@[Offset:Vector3:4,4]"
+                                    Opacity="@[Opacity:DoubleSlider:1.0:0.0-1.0]"/>
+        </ui:Effects.Shadow>
+      </Rectangle>
+      <Border CornerRadius="32"
+              Height="100" Width="100"
+              BorderBrush="White" BorderThickness="1">
+        <Border.Background>
+          <ImageBrush ImageSource="ms-appx:///Assets/Photos/Owl.jpg"/>
+        </Border.Background>
+        <!-- TODO: Doesn't work? -->
+        <ui:Effects.Shadow>
+          <media:AttachedCardShadow CornerRadius="32"
+                                    Offset="4,4"/>
+        </ui:Effects.Shadow>
+      </Border>
+      <!-- Note how even though this element is transparent, the shadow only shows on its edges still! -->
+      <Rectangle ui:Effects.Shadow="{StaticResource CommonShadow}"
+                 Fill="#80FF0000"
+                 RadiusX="4" RadiusY="4"
+                 Width="200" Height="100"/>
+      <!-- Compared to the old DropShadowPanel where the shadow bleeds through and
+       the Shadow opacity is tied to the Rectangle itself -->
+      <controls:DropShadowPanel xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+                                OffsetX="4" OffsetY="4"
+                                BlurRadius="12"
+                                HorizontalAlignment="Center">
+        <Rectangle Fill="#80FF0000"
+                   RadiusX="4" RadiusY="4"
+                   Width="200" Height="100"/>
+      </controls:DropShadowPanel>
+      <Button Content="I Also have a Shadow!"/>
+    </StackPanel>
+  </ScrollViewer>
+</Page>