Win10 UWP Rendering principle directcomposition rendering

This article tells you a new technology directcomposition, after Win7 (actually Vista), Microsoft is considering a new rendering mechanism

A service was introduced in Windows Vista, the Desktop Window manager, the Windows Manager, although it is not a good way to see the DWM from the C + + developer blog, but better than before.

At the time of Win8, Microsoft proposed directcomposition, which is a new method.

In software rendering has always been two camps, one is the use of direct rendering mode. Examples of direct rendering are the use of DIRECT2D and Direct3D, while the way directly through the Dx API requires the use of C + + and the underlying API, which is less efficient to develop.

Released in 1511, Microsoft told everyone to use the Directcomposition interface, so that everyone can make good-looking results through directcomposition

In the original UWP app, it was easy to use XAML to write an interface, but how to create an interface without XAML.

I'm not going to tell you to go to new a control because it's similar to the previous method. I'll tell you how to start drawing from a Visual.

There are several ways in which the UWP can display the interface

• The new control is displayed through XAML or background. This is the most recommended method, the following method in this article is not recommended, but you can let everyone know the principle. Elements that are displayed in XAML are generally inherited UIElement, and elements created can interact with each other.

• If you need high-performance drawing, win2d is a good way to do it. It is also known that the win2d created just shows that there will be no interaction if the need for interaction needs to be written by itself. While it's easy to write an interaction, there's a lot of code duplication if you don't use the framework.

• Use DirectX APIs to draw 3d pictures, but now you need some C + + code.

In the UWP display, it is recommended to use XAML to write the interface, because XAML is an interface-independent code that can be used both in C # and C + +. If you use C # to write the interface, then the code is combined with C # and cannot run well in C + +. And using XAML is simpler than using C #, and you can see the interface effect in the VS real-time compiler.

Perhaps everyone will be related to how the FDS is made, for Microsoft's design, all the XAML or win2d display is a bitmap. The bitmap here is not what everyone wants bitmapImage but rather shows a statement that Microsoft is outputting all the bitmaps to directcomposition. "The Directcomposition component enables developers to perform high-performance bitmap compositing and add effects such as transforms, effects, and animations to create a more complex, vivid, and fluid user interface," Directcomposition of Microsoft said in the official. Directcomposition uses the acceleration features of the graphics hardware to perform rendering processes that are independent of the UI thread, support 2D affine transformations, 3D perspective transformations, and other basic effects such as clipping and opacity.

See the Windows Composition API Guide-Understanding Composition API Thanks to the great God.

So is it possible to write the UWP framework yourself by composition display elements.

Before you start telling people to write the UWP framework, let's give you a simple example of how to apply directcomposition.

Example

Before writing a simple animation is a good looking effect, see Win10 UWP progress bar Waveprogresscontrol

Here's how to write from scratch by deleting all the XAML files.

Create a project

Start by creating a UWP project, and pay attention to choosing a higher target.

How to write a display

Now create the project and delete all the apps and MainPage classes. Re-create a class.

As long as the display is supported, it can be done halfway, because the UWP element display is where the elements are displayed through the layout. Of course, there is no mention of Translate. Then the element tells the graphics card by calling Drawcontex that the graphics need to be obvious. Then the user input is added, which makes up the framework.

Although a framework is a lot more complex than the above, but when writing avalonial, the Great God tells me that in fact an interface framework is primarily the display and interaction. This article will not tell you how to write the interaction, just tell us how to display it.

Delete all the automatically generated code, now create a class View to display.

The meaning of the following code see "Win 10 Application Development" UI composition Notes (a): implementation of the View framework-East evil solitary-blog Park

Using system.numerics;using windows.applicationmodel.core;using windows.ui;using windows.ui.composition;using  Windows.ui.core;namespace hmeuchsvv{Internal class View:iframeworkview, Iframeworkviewsource {public void            SetWindow (CoreWindow window) {_compositor = new compositor (); _compositiontarget = _compositor.            Createtargetforcurrentview (); Create a container to add Visual display complex elements var container = _compositor to his children.            Createcontainervisual ();            _compositiontarget.root = container; Create Spritevisual, this class is not only a container, but also itself can be drawn out var visual = _compositor.            Createspritevisual (); Tell this element the size and upper left corner, so this is a rectangle, and set the color visual.            Size = new Vector2 (100, 100); Visual.            Offset = new Vector3 (10, 10, 0); Visual. Brush = _compositor.            Createcolorbrush (colors.red); Adding elements, the added elements will be displayed container.        Children.insertattop (visual);     } public void Run ()   {//Startup window needs to activate var Windows = Corewindow.getforcurrentthread (); Window.            Activate (); The dispatch mode uses Dispatcher to get the message window through this.        Dispatcher.processevents (Coreprocesseventsoption.processuntilquit); } public void Initialize (Coreapplicationview applicationview) {} public void Load (String entr        Ypoint) {} public void Uninitialize () {} public Iframeworkview CreateView ()        {return this;        } private CompositionTarget _compositiontarget;        Private Compositor _compositor;        private static void Main () {Coreapplication.run (New View ()); }    }}

The above code has some comments, in this way you can create a display rectangle

In fact, it is easy to know from the code above that only one class is inherited and IFrameworkView, IFrameworkViewSource then used to CreateView return himself, and this class can be displayed.

But you also need to use the main function to tell the software which class to start, and when you run the Startup window, you window.Activate will see that only a welcome picture will not display a rectangle if it is commented out.

So when did the window support rendering?

The core code is CreateTargetForCurrentView This function can only be called once, if you try to call him two times, then an exception will occur. Because calling this function will tell directcomposition to create the element.

           _compositor = new Compositor();            _compositionTarget = _compositor.CreateTargetForCurrentView();

The displayed rectangle is displayed by creating a spritevisual. Then write a spritevisual, let two add up.

        public void SetWindow (CoreWindow window) {_compositor = new compositor (); _compositiontarget = _compositor.            Createtargetforcurrentview (); Create a container to add Visual display complex elements var container = _compositor to his children.            Createcontainervisual ();            _compositiontarget.root = container; Create Spritevisual, this class is not only a container, but also itself can be drawn out var visual = _compositor.            Createspritevisual (); Tell this element the size and upper left corner, so this is a rectangle, and set the color visual.            Size = new Vector2 (100, 100); Visual.            Offset = new Vector3 (10, 10, 0); Visual. Brush = _compositor.            Createcolorbrush (colors.red); Adding elements, the added elements will be displayed container.                        Children.insertattop (visual); var visual1 = _compositor.            Createspritevisual (); Creates an overlapping element visual1.            Size = new Vector2 (100, 100); Visual1.            Offset = new Vector3 (20, 20, 0); Visual1. Brush = _compositor. Createcolorbrush (                COLOR.FROMARGB (128 */transparent */, 0, 255, 0)); Container.        Children.insertattop (VISUAL1); }

You can use this method to create multiple rectangles, and you can determine where he is displayed by specifying the location and size.

It's got three things on it. The first is Visual, which is a basic class. With Containervisual inheriting Visual, in fact he can only have child elements. The last one is spritevisual, this class is the same as containervisual, but he can use a brush.

So spritevisual set the brush is what he can set three different brushes. The first one is just for everyone to see the Compositioncolorbrush, this is a solid color brush. The second one is more complex, you can use the special effects of the Compositioneffectbrush brush, the last one is the Compositionsurfacebrush can and DX interactive data.

From the above code actually just draw a normal rectangle, if you want to write text, draw lines, then how to do. At this point you need to use Compositionsurfacebrush, which is the most complex. This class can be used d2d to draw, in the UWP simple to use the method is win2d so below to tell you how to use the win2d to draw.

But the UWP bottom-up is directly using D2D without a win2d package. WPF using SHARPDX from my blog in the d3dimage display can be known that the use of d2d in WPF is rather difficult because it is difficult to assemble two in one interface. But with this class, the UWP can place the underlying rendering at the specified level. That's why the UWP can make high performance, because WPF is difficult to modify his rendering, even if using d3dimage is to display the rendered bitmap as a picture, you need to render the bitmap in the graphics card and then copy it to memory so that WPF draws the picture. However, the UWP can draw directly without using a method such as WPF. I think the UWP is a big boost here, and that's what I see a lot of great gods say not adding win2d in WPF, from the underlying technology implementation is not the same.

Compositionsurfacebrush

You first need to install win2d and then use Compositionsurfacebrush in SetWindow. Or the same as the above code, but you need to create a function to create win2d, see below

        private void GetCanvasAndGraphicsDevices()        {            var canvasDevice = CanvasDevice.GetSharedDevice();            _graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(                _compositor, canvasDevice);            _graphicsDevice.RenderingDeviceReplaced += OnRenderingDeviceReplaced;        }

This way you can get graphicsdevice, this is used to do compositionsurfacebrush.

If you need to create a compositionsurfacebrush then you need a compositiondrawingsurface, and Compositiondrawingsurface can be created by GraphicsDevice, The code is simple.

            _compositor = new Compositor();            _compositionTarget = _compositor.CreateTargetForCurrentView();            // 创建 win2d 用于渲染            GetCanvasAndGraphicsDevices();            _drawingSurface = _graphicsDevice.CreateDrawingSurface(                new Size(600, 600),                DirectXPixelFormat.B8G8R8A8UIntNormalized,                DirectXAlphaMode.Premultiplied);            var brush = _compositor.CreateSurfaceBrush(                _drawingSurface);

So how does the Compositionsurfacebrush created appear? Just now that spritevisual can display a brush, create this class to display.

            var drawingVisual = _compositor.CreateSpriteVisual();            drawingVisual.Size = new Vector2(600, 600);            drawingVisual.Brush = brush;

Then add him to the vision, like the code above, just put the Brush creation to write the other code

            var containerVisual = _compositor.CreateContainerVisual();            _compositionTarget.Root = containerVisual;            containerVisual.Children.InsertAtTop(drawingVisual);

Here is the win2d to draw the rectangle.

        private void Redraw()        {            using (var drawingSession = CanvasComposition.CreateDrawingSession(                _drawingSurface))            {                drawingSession.FillRectangle(                    new Rect(10, 10, 200, 200),                    Colors.Red);                drawingSession.FillRectangle(                    new Rect(300, 300, 200, 200),                    Color.FromArgb(255,126,50,50));            }        }

When can I call this function? Actually, the last call to the function is just right.

Now the interface is two rectangles

All the Code

    Internal class View:iframeworkview, Iframeworkviewsource {public void SetWindow (CoreWindow window)            {_compositor = new compositor (); _compositiontarget = _compositor.            Createtargetforcurrentview ();            Create win2d for rendering getcanvasandgraphicsdevices (); _drawingsurface = _graphicsdevice.createdrawingsurface (new Size (+), Directxpixelform At.            B8g8r8a8uintnormalized, directxalphamode.premultiplied); var brush = _compositor.            Createsurfacebrush (_drawingsurface); var drawingvisual = _compositor.            Createspritevisual ();            Drawingvisual.size = new Vector2 (600, 600);            Drawingvisual.brush = Brush; var containervisual = _compositor.            Createcontainervisual ();            _compositiontarget.root = containervisual;            ContainerVisual.Children.InsertAtTop (drawingvisual);        Redraw (); } publicvoid Run () {//Startup window needs to activate var Windows = Corewindow.getforcurrentthread (); Window.            Activate (); The dispatch mode uses Dispatcher to get the message window through this.        Dispatcher.processevents (Coreprocesseventsoption.processuntilquit); } public void Initialize (Coreapplicationview applicationview) {} public void Load (String entr        Ypoint) {} public void Uninitialize () {} public Iframeworkview CreateView ()        {return this;        } private CompositionTarget _compositiontarget;        Private Compositor _compositor;        Private Compositiongraphicsdevice _graphicsdevice;        Private Compositiondrawingsurface _drawingsurface;        private static void Main () {Coreapplication.run (New View ());             } private void Getcanvasandgraphicsdevices () {var canvasdevice = Canvasdevice.getshareddevice (); _graphicsdevicE = Canvascomposition.createcompositiongraphicsdevice (_compositor, Canvasdevice);        _graphicsdevice.renderingdevicereplaced + = onrenderingdevicereplaced; } private void onrenderingdevicereplaced (Compositiongraphicsdevice sender, Renderingdevicereplacedevent        args args) {Redraw ();                } private void Redraw () {using (var drawingsession = canvascomposition.createdrawingsession ( _drawingsurface)) {Drawingsession.fillrectangle (new Rect (10, 10                , colors.red); Drawingsession.fillrectangle (new Rect), Color.FromArgb (255,126,5            0,50)); }        }    }

Then try using win2d to write text, see Win10 UWP win2d

Modify function and normal use win2d no different

        using (var drawingSession = CanvasComposition.CreateDrawingSession(                _drawingSurface))            {                drawingSession.Clear(Colors.White);                drawingSession.DrawText("lindexi", new Vector2(100, 100), Color.FromArgb(0xFF, 100, 100, 100));            }

And how to use animations and effects, I'm not going to say it here.

Code reference graphics and animations-Windows combination supports 10 times zoom

Reference:

Graphics and animations-Windows combination supports 10 times zoom

"Win 10 App development" UI composition Notes (i): implementation of the View framework-East evil solitary-blog Park

Windows Development with C + +-high-performance window layering with the Windows composition engine

Windows Development with C + +-using the Windows composition engine

Windows, UI and composition (the Visual Layer) –mike taulty

Windows with C + +-directcomposition:a retained-mode API to Rule them all

I set up my own blog https://lindexi.gitee.io/welcome everyone to visit, there are many new blog. Only when I see the blog is mature will not be placed in the CSDN or blog park, but once published, no longer update

If you see anything in the blog do not understand, welcome to communicate, I set up the Dotnet Vocational Technical College welcome everyone to join

This work is licensed under the Creative Commons Attribution-NonCommercial use-Share 4.0 International license agreement in the same way. Welcome to reprint, use, republish, but be sure to keep the article Attribution Lindesi (including Link: http://blog.csdn.net/lindexi_gd), not for commercial purposes, based on the modified works of this article must be issued with the same license. If you have any questions, please contact me.

Win10 UWP Rendering principle directcomposition rendering