Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<Page x:Class="ShadowBorder.MainPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:MainViewModel x:Name="ViewModel" />
<GridView ItemsSource="{Binding People}"
<Canvas HorizontalAlignment="Stretch"
Margin="10" />
<StackPanel Background="DarkCyan"
<TextBlock Text="{Binding Name}"
Foreground="PapayaWhip" />
<TextBlock Text="{Binding Age}"
Foreground="FloralWhite" />
<Style TargetType="GridViewItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Margin"
Value="5" />
using System.Numerics;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Hosting;
namespace ShadowBorder
public sealed partial class MainPage : Page
public MainPage()
private void GridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
if (args.ItemContainer is GridViewItem gvItem && gvItem.ContentTemplateRoot is Grid rootGrid)
// Get the elements in the DataTemplate using index (this isn't very safe but you get the point)
var canvas = rootGrid.Children[0] as Canvas;
var stackPanel = rootGrid.Children[1] as StackPanel;
var visual = ElementCompositionPreview.GetElementVisual(stackPanel);
var sprite = visual.Compositor.CreateSpriteVisual();
sprite.Size = visual.Size;
sprite.CenterPoint = visual.CenterPoint;
var shadow = visual.Compositor.CreateDropShadow();
// Change this to make the shadow bigger or smaller
shadow.BlurRadius = 10;
// Change this starting position if you want the shadow a little higher or lower
shadow.Offset = new Vector3(0, 0, 0);
// Darken this color if you need darker shadows (I tested against a white background)
shadow.Color = Color.FromArgb(0x96, 0x96, 0x96, 0x96);
// We're done setting up the shadow, set it to the sprite visual
sprite.Shadow = shadow;
ElementCompositionPreview.SetElementChildVisual(canvas, sprite);
// animated the final result using reference parameters
var bindSizeAnimation = visual.Compositor.CreateExpressionAnimation("hostVisual.Size");
bindSizeAnimation.SetReferenceParameter("hostVisual", visual);
sprite.StartAnimation("Size", bindSizeAnimation);
using CommonHelpers.Common;
using CommonHelpers.Models;
using CommonHelpers.Services;
using System.Collections.ObjectModel;
// IMPORTANT: Add "CommonHelpers" NuGet package for sample data source
namespace ShadowBorder
public class MainViewModel : ViewModelBase
public MainViewModel()
People = new ObservableCollection<Person>(new SampleDataService().GeneratePeopleData(true));
public ObservableCollection<Person> People { get; set; } = new ObservableCollection<Person>();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.