Win2D CanvasBitmap vs Microsoft.UI.Composition CompositionImage

Question

EDIT:

They removed the CompositionImage in the last build ...

---

I would like to know the difference between Win2D CanvasBitmap and Microsoft.UI.Composition CompositionImage.

In both case I was able to display images but I don't really know/understand the difference between the two approach.

---

The CanvasBitmap approach:

XAML:

<xaml:CanvasControl Draw="OnDraw"  />

Code:

private void Onraw(CanvasControl sender, CanvasAnimatedDrawEventArgs e)
        {
           var image = await CanvasBitmap.LoadAsync(...);
           e.DrawingSession.DrawImage(...);
        }

---

The CompositionImage approach:

XAML:

 <Grid x:Name="Host" />

Code:

ContainerVisual rootVisual =  
        (ContainerVisual)ElementCompositionPreview.GetContainerVisual(this.Host);
Compositor compositor = rootVisual.Compositor;
CompositionGraphicsDevice device = compositor.DefaultGraphicsDevice,

CompositionImage image = device.CreateImageFromUri(...);

ImageVisual content = Compositor.CreateImageVisual();
content.Image = image;

rootVisual.Children.InsertAtTop(content);

---

What's the difference? What is the best approach?

To put thing in the context, I have an application that displays a lot of small images. I need the app to be low on memory and to draw fast the images.

Thanks, Adrien.

Answer 1

Win2D is basically a simple 2D wrapper over directx - if you create a canvas you have a directx context where you can draw in.

The composition APIs let you mingle with the layer between XAML and DirectX - this is a bit higher level than Win2D, and also the "canvas" is the app itself :)

So the Win2D CanvasBitmap is like Image in XAML, while the CompositionImage is more like ImageSource, because you can only use it in a visual or as an effect source.

---

Technically you can use whichever you want or is easier for you. Keep in mind that the Composition APIs are only available in Windows 10 after TH2 (1511) version, so if you want to support RTM (build 10240) use a Win2D solution.

Answer 2

It depends...

A CanvasControl and a ImageVisual are extremely similar in terms of rendering cost. In terms of CPU cost the ImageVisual is more lightweight.

However, you can display large numbers of CanvasBitmaps inside a single CanvasControl (or CanvasAnimatedControl) - so if you're looking to display something like a 2D game made up of many hundreds of bitmaps then Win2D is probably the way to go.

If you want to take advantage of Composition's animation system and mix images with XAML components then Composition is probably the way to go.