Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<Page x:Class="ShadowBorder.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShadowBorder"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
<local:MainViewModel x:Name="ViewModel" />
</Page.DataContext>
<Grid>
<GridView ItemsSource="{Binding People}"
ContainerContentChanging="GridView_ContainerContentChanging"
Margin="5">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Canvas HorizontalAlignment="Stretch"
Margin="10" />
<StackPanel Background="DarkCyan"
Padding="5"
MinWidth="150">
<TextBlock Text="{Binding Name}"
FontWeight="Bold"
Foreground="PapayaWhip" />
<TextBlock Text="{Binding Age}"
Foreground="FloralWhite" />
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<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" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</Grid>
</Page>
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()
{
InitializeComponent();
}
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 https://www.nuget.org/packages/CommonHelpers/
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.