Created
April 2, 2019 22:13
-
-
Save LanceMcCarthy/f153dc74d56ec0ea74f73b315bae7cae to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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