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