WPF uses Maui's self drawing logic

This is a function that has not been developed yet , To be exact, even the preview version is not a function . I thought MAUI Can't be in WPF Running up , But after reading it MAUI The whole big design , Only to learn that , original MAUI It is a very large development project . stay MAUI Inside , Although it is now officially released , But in the officially released version, only the native control is used for drawing . This is not consistent with the official propaganda , Reading. MAUI Relevant documents , actually MAUI There is also a big part , That is the self drawing part , It's not finished yet , The code is also divided into warehouses , That's why I didn't find it at first . This article will tell you MAUI This part of the killer has not been released yet

All of this article is about rendering layers , And as we all know , One UI The two most important parts of the framework are interaction and rendering . This article will only cover a part of rendering

Make a cross platform UI A framework has many ways , For example, use the native controls provided by various platforms , That is to say Windows On the platform , use WinUI The button , stay iOS Use the buttons provided by apple on the platform , Specific button styles need to take the minimum set of the platform and open customization , The most important representative is the original Xamarin The way . One advantage of using native controls provided by various platforms is that you can obtain the functions provided by the platform , More suitable for the vision and interaction of specific platforms , The disadvantage is that different platforms have different visual effects . Another way is to do the self drawing of the lower layer in the middle , Basically, each platform will provide the ability of self drawing , Such as WPF Under the DrawingContext and Win2D wait , Do self drawing based on this method , It is more convenient to access the original platform , Reduce the cost of original application access , This is the focus of this article . The last way is to draw the bottom layer , Use the drawing logic at the bottom of the platform , Or the encapsulation of other rendering frameworks , Such as Skia or GTK etc. , Render this . More controllability can be achieved by using the underlying self drawing logic , But the drawback is that the controllability makes the development very troublesome , Compared with the existing application access, it can not achieve the best performance

A great deal of UI The framework will adopt one of these methods . But don't forget MAUI It was done by a soft main force , According to some soft idea , That's all . stay MAUI Inside , You can use the native controls provided by the platform to splice and make the interface , It is also possible to use an independent platform based on UI The self drawing ability and drawing interface provided by the framework , You can also call the underlying rendering logic to render

but , This is not free . Such a big project , The cost of natural inputs , Whether it's manpower or development cycle , It's all huge . Although now MAUI Officially released , Unfortunately, there is still a lot of work to be done , It hasn't even started yet

After learning the lessons of many failures , A soft decision to split the warehouse , To solve the overall failure caused by the failure of some components or parts of such a large project . This is a dotnet runtime The group's successful examples bring the experience of organizational form , stay dotnet runtime Inside , Put the function of unstable experiment in .NET Runtime Lab Inside the warehouse . Unstable function , If you can , Naturally, it can be greatly improved dotnet Competitiveness , If not, it should not affect the whole dotnet Release

Current MAUI This is also the way of management , stay MAUI Inside , Pull out the render layer Microsoft.Maui.Graphics Warehouse , Such as MAUI Getting started with custom drawing   mentioned . Actually Microsoft.Maui.Graphics It's from the original System.Graphics Come under a different name . This System.Graphics The preliminary completion time of the project is shorter than MAUI Much earlier , Positioning is to do the drawing and packaging layer of the whole platform , It provides the upper level unification of rendering on various platforms . It includes two implementation methods , One is for each platform UI The self drawing logic of the framework , So as to unify the upper layer . Another method is to draw and render logic for each underlying layer, including Skia and GTK Even DirectX encapsulate , So as to provide unified logic for the upper layer , Just simple code to switch

Then there is Microsoft.Maui.Graphics On the basis of , That is to say, after providing the unified drawing capability of the upper layer of each platform , To implement each basic control . This is it. Microsoft.Maui.Graphics.Controls Warehouse , The requirement of this warehouse is to make self drawn controls . In this way, the unity of pixel level on each platform can be realized , Or it is more convenient to access the original application UI frame

This article is in 2022.06 Written , Many of the above functions can only be blown or not used . But just write an article on hydrology , That's not my style . Nature is to start the actual code writing phase

My friends who know me all know , I am familiar with rendering . I will tell you next , How to use Maui Framework layer provided , coordination WPF Provide specific self drawing logic , Put the two together , So as to achieve WPF Use MAUI Self drawing logic of

The core implementation method is WPF Provide canvas function , Give Way MAUI Can be in WPF Draw elements on it . stay MAUI It provides a framework , And specific drawing instructions , And the upper layer API call

The following sections of this article will use the unpublished , But it is almost finished  Microsoft.Maui.Graphics.Xaml.WPF  Features provided . The code of this library is placed in Microsoft.Maui.Graphics Warehouse , This library belongs to the self drawing of the lower layer in the middle , utilize WPF Provide rich drawing ability to intervene MAUI Defined abstract interfaces . Because this library has not been completed , To complete the access , I didn't use it DLL quote , Instead, I copied the code of this library into my test code , Then make a little magic change , Resolve build failure

The general docking method is as follows , First in WPF Put a Canvas Control , This control will be used as MAUI Canvas of . This can also answer the doubts of some partners , That's it MAUI Access WPF Words , It can be accessed as a control , Instead of acting like WindowsFormsHost The way to access . Such as the following code in this article , Just providing a Canvas Control , Give Way MAUI Draw the content in this Canvas On . So visible MAUI The major aspects of the design are still very good

<Canvas x:Name="Canvas" />

In the background code , Will be created XamlCanvas Type of  _canvas  Field , At the same time, the Canvas Pass in

public partial class MainWindow : Window{    public MainWindow()
    {
        InitializeComponent();

        _canvas.Canvas = Canvas;

        SizeChanged += (source, args) => Draw();
    }    public IDrawable Drawable
    {        get => _drawable;        set
        {
            _drawable = value;
            Draw();
        }
    }    private void Draw()
    {        if (_drawable != null)
        {            using (_canvas.CreateSession())
            {
                _drawable.Draw(_canvas, new RectF(0, 0, (float) Canvas.Width, (float) Canvas.Height));
            }
        }
    }    private readonly XamlCanvas _canvas = new XamlCanvas();    private IDrawable _drawable;
}

Of the above code XamlCanvas Inherited ICanvas Interface . stay MAUI In the self drawing of , The most important thing is ICanvas Interface , This is an interface that represents the canvas , In this interface, the concrete rendering abstraction is implemented API Definition . let me put it another way , If you want to access other platforms you want , The important thing is to realize ICanvas The function of

The above XamlCanvas It is a function provided by the library , Will be passed through the Canvas Realize docking MAUI and WPF The logic of

With the canvas , Want to draw content on the interface , It also needs to tell the framework layer what it wants to draw . This is what belongs to the business layer , In the business layer , Will need to inherit IDrawable Interface , Realization Draw Method . stay Draw Method to render the business layer

For example, a line drawing business function , You can use the following implementation

class DrawLines : IDrawable
    {        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            canvas.DrawLine(50, 20.5f, 200, 20.5f);

            canvas.DrawLine(50, 30.5f, 200, 30.5f);
        }
    }

take DrawLines The object of is set to Drawable attribute , You can see the line drawn on the interface

The above DrawLines It belongs to   Universal MAUI Render layer   The logic of , Take this code out , You can run with other low-level rendering techniques but access Microsoft.Maui.Graphics The rendering technology of virtual reality , For example, the bottom layer is replaced by Win2D etc. . In this way, the upper layer can be built Universal MAUI Render layer logic , So as to build an ecological interface effect . More custom drawings , Please have a look at MAUI Getting started with custom drawing - lindexi - Blog Garden

I highly recommend you to run my demo So as to understand the current MAUI Implementation progress of

This article tests the code in github  and  gitee  Welcome to visit

You can get the source code of this article in the following ways , Create an empty folder first , Then use the command line cd Command to enter this empty folder , Enter the following code on the command line , You can get the code of this article

git initgit remote add origin https://gitee.com/lindexi/lindexi_gd.gitgit pull origin 8d4c37dbbde83e03a6daa4e3454a5d007c64dffe

What is used above is gitee Source , If gitee Cannot access , Please replace with github Source

git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git

After getting the code , Get into RijoqicainejoHifolurqall Folder