CompositionProToolkit v0.4.6 released

Another update to CompositionProToolkit this week with couple of feature additions to ImageFrame and some bug fixes.


Optimized Shadow

ImageFrame now provides a new dependency property called OptimizeShadow which allows multiple ImageFrame instances to share the same DropShadow instance. You can set this property to True when you are displaying several ImageFrame instances within a single container and each ImageFrame instance has shadow enabled. This will reduce the memory footprint.

Dependency Property Type Description Default Value
OptimizeShadow Boolean Indicates whether the ImageFrame should use a shared shadow object to display the shadow. False


ImageFrame now implements the IDisposable interface and thus provides a Dispose method to free up resources. ImageFrame internally uses several Composition objects which must be disposed to optimize the memory usage within your app.

Guidelines for effectively disposing ImageFrame

Consider a scenario where you are displaying several ImageFrame instances in a GridView within a page. When the app navigates away from the page, then you must dispose the ImageFrame instances like this

protected override void OnNavigatedFrom(NavigationEventArgs e)
    foreach (var imgFrame in ItemGridView.GetDescendantsOfType())
    ItemGridView.ItemsSource = null;


Frosted Glass Effect Brush

A new extension method CreateFrostedGlassBrush has been added to Compositor which, as the name suggests, allows you to create a custom shaped brush which gives a frosted glass effect. The main difference between this method and the CreateMaskedBackdropBrush is that when you apply the FrostedGlassBrush to a visual with a DropShadow, it will look better, whereas with the MaskedBackdropBrush, the shadow will darken the visual.


You can obtain the mask from the FrostedGlass effect brush, to apply to the DropShadow, in the following way

var roundRectGeometry = CanvasGeometry.CreateRoundedRectangle(_generator.Device, 
    0, 0, _width, _height, 25, 25);
var maskSurface = _generator.CreateMaskSurface(visual.Size.ToSize(),
var frostedBrush = _compositor.CreateFrostedGlassBrush(maskSurface,
     Colors.AntiqueWhite, 30f, _backdropBrush);

var shadow = _compositor.CreateDropShadow();
shadow.Opacity = 0.5f;
shadow.Color = Colors.Black;
shadow.Offset = new Vector3(10, 10, 0);
shadow.BlurRadius = 15;

// Apply the mask to the shadow
shadow.Mask = frostedBrush.GetSourceParameter("mask");

visual.Brush = frostedBrush;
visual.Shadow = shadow;

The FrostedGlass effect brush was inspired from this blog post.

The latest source code is available in GitHub and the NuGet package is available here.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s