Images in Composition

I am developing my apps with more visual transitions, animations, etc. all managed in the Visual Layer, is really smoother than using XAML animations, there are no dependency properties and might be, you remember that animating some properties were not optimized.

To clarify adding images in Composition let’s explain the example I am achieving.

In my case I want to fade from Image to another Image, when I began to do this I uses the ArithmeticCompositeEffect with the following definition:

var effectDef = new ArithmeticCompositeEffect
                Name = "effect",
                ClampOutput = false,
                MultiplyAmount = 0,
                Source1Amount = 1,
                Source2Amount = 0,
                Source1 = new CompositionEffectSourceParameter("ImageSource"),
                Source2 = new CompositionEffectSourceParameter("Source2")

And it works really well like in the ‘Finding Dory’ tweets I did. So I decided to follow that way, when is showing one of the Images I could update the other one with other Uri/File source and animate again. But it makes a disgusting flickering I think you cannot avoid.

The only way to do this is extracting the base of the CompositionImage class from the SamplesCommon project and set two SpriteVisuals in a ContainerVisual and animate the Opacity of each.

So I decided to make a diagram of all the flow in there, to understand what is happening, because meanwhile the Composition API is final, it has been changing the way of the Images and other sources are obtained.

In this case I want to set an Image in the Visual of a custom class that inherits from control:


The steps to set a Visual in the Element are the following were you will need the SamplesCommon source project reference:

  1. Gain access to the Visual Layer (Composition) by calling the GetElementVisual of static ElementCompositionPreview.
  2. From the compositor of the Visual create an SpriteVisual and a SurfaceBrush.
    1. The SpriteVisual will be the Child of the Control Visual.
    2. The SurfaceBrush will be brush that fills the SpriteVisual (like ImageBrush in the Background of a Grid in XAML)
  3. Create a CompositionDrawingSurface using SurfaceLoader Helper
  4. Set that surface to the SurfaceBrush previously created.
  5. Set the SurfaceBrush as Brush of the SpriteVisual.
  6. Set the Child Visual of the Visual by calling SetChildElementVisual of the static ElementCompositionPreview.

It might appear a bit complex, but what it really means is you have a lot of control of what to do. For instance (I have not tried it yet) you have access to a DrawingSession that means you can make a lot of geometric and drawing operations in that step, might be even use Win2D effects (I have to check that and also if is a transparent session)

This Surface ‘Image’ brush of the SpriteVisual is one of you can set, you can take a look more options in here:

Also you have now the composition properties of the Visual and the ‘Child’ SpriteVisual and you can animate all of them smooth, which is really important.

And the SurfaceBrush has properties like the XAML ImageBrush like alignments, stretch, etc. which make the things easier to work with.

Hope this makes easier to understand the flow of the Visual Layer and how interoperates with Win2D objects. As always @juanpaexpedite






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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s