|public sealed partial class MainPage : Page|
|// Normally you want to cache and reuse most of these objects,|
|// but we won't for the purposes of this demo.|
|private void InitComposition()|
|var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;|
|var visual = compositor.CreateSpriteVisual();|
|visual.Size = new Vector2(675, 248);|
|visual.Offset = new Vector3(50, 50, 0);|
|// Can be found at https://github.com/robmikh/compositionimageloader|
|var imageLoader = ImageLoaderFactory.CreateImageLoader(compositor);|
|var surface = imageLoader.LoadImageFromUri(new Uri("http://ncmedia.azureedge.net/ncmedia/2014/10/MSFT_logo_rgb_C-Gray.png"));|
|var brush = compositor.CreateSurfaceBrush(surface);|
|IGraphicsEffect graphicsEffect = new InvertEffect|
|Name = "invertEffect",|
|Source = new CompositionEffectSourceParameter("image")|
|var effectFactory = compositor.CreateEffectFactory(graphicsEffect);|
|var effectBrush = effectFactory.CreateBrush();|
|visual.Brush = effectBrush;|
Using the InvertEffect with Windows.UI.Composition
Getting a Compositor and creating a Visual
You can think of the Compositor as the gateway into the Composition APIs. The Compositor creates all composition related objects, so getting one is pretty important. When writing a XAML app, you can use
Creating a visual is pretty easy:
This creates a new SpriteVisual that you can manipulate. Keep in mind that for visuals to show up on the screen they need to be attached to the Visual Tree. To do this in a XAML application, you can attach a visual to be the child of any UIElement using
Currently loading content is done through something like Direct2D or Win2D. I've written an image loader for use with the Composition APIs that you can find here. You'll find that there is a NuGet package for your convenience. The ImageLoader is largely a wrapper for Win2D. Using it is pretty easy:
Keep in mind that you really should only be making on ImageLoader, so in a real application you'd want to store it somewhere to be able to reuse it later. Something to keep in mind with the Composition APIs is that you are susceptible to having your graphics device being lost. You can read about that DirectX concept here. What this means is that when the device is lost you need to redraw your content. CompositionImageLoader can take care of that for you through the ManagedSurface object. We won't use it here, but it is easy to consume (check out the GitHub page to learn more).
Creating an EffectFactory
Now for what you're here for. Keep in mind that while we're using the InvertEffect for this demo, there are many more effects that are supported. You can find a list of supported effects here.
The first step is to create the effect description:
The name property is largely used when you want to animate an effect property, which is a different topic that you can see in action here. Next is to set the source as a CompositionEffectSourceParameter and to give it a name so that you can refer to it later. After you have the description, create an effect factory for it:
Your effect is now compiled, so whenever you want to create a new InvertEffect all you have to do is ask the effect factory to create a new brush for you to assign to your Visual. The factory is another object you'll want to keep around if you intend to use more effects of the same time. What is left is to create an effect brush and set the image to the image we generated earlier:
Now you're free to attach the brush to your Visual:
After you attach your visual to the tree you should see your inverted image!
You'll probably want to roll this into a custom control if you don't want your Visual just floating there on the page.