Using .NET MAUI Community Toolkit DrawingView
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Whether you are creating a Pictionary game or collecting signatures in your .NET MAUI app, the DrawingView will make your live much much easier! In this video we will learn what the .NET MAUI Community Toolkit DrawingView is, how to set it up and how to actually use it!
💝 Join this channel to get access to perks:
th-cam.com/channels/ral.html...
Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
🛑 Don't forget to subscribe to my channel for more cool content: th-cam.com/users/GeraldVerslui...
🐦 Follow me on Twitter: / jfversluis
🤝 Join the Discord server: / discord
🔗 Links
Sample Code Repo: github.com/jfversluis/MauiDra...
CommunityToolkit.Maui Repo: github.com/CommunityToolkit/Maui
.NET MAUI Docs: docs.microsoft.com/dotnet/com...
⏱ Timestamps
00:00 - .NET MAUI Community Toolkit DrawingView
00:18 - Why Use DrawingView?
01:16 - Install .NET MAUI Community Toolkit NuGet
02:30 - Use DrawingView in XAML
03:45 - Explore DrawingView APIs
07:41 - Save an Image from DrawingView
12:24 - What Are You Creating with DrawingView?!
🎥 Video edited with Filmora
🙋♂️ Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#dotnetmaui #drawingview #signaturepad #dotnet6 #maui - วิทยาศาสตร์และเทคโนโลยี
Saving images that you have drawn with the DrawingView is easy! Check out this video to learn how: th-cam.com/video/OB65n17bR98/w-d-xo.html
Or, want to learn more about the .NET MAUI Community Toolkit features? Have a look at this wonderful playlist! th-cam.com/video/DkQbTarAE18/w-d-xo.html
Great! You helped me so much. Now I know as capture signatures. Thanks.
Glad to hear it! Thanks for letting me know 🥰
Awesome Gerald, Community toolkit had lot of improvements
There is some pretty amazing stuff in there and more coming! What feature you want to see a video on next?
Hey @Gerald it was advantageous but is there a way that save the image without the gray background?
Great video!
Yes - please show how to save a signature to a file of some sort and also upload it to a backend system to store.
You don't need to store it in a file, because you already have a stream that you can work with.
Thanks Doug! This might be a nice idea to create something end-to-end. I'll think about it!
@btigenie a video about saving a file is now here: th-cam.com/video/OB65n17bR98/w-d-xo.html
I am not so familiair with Xamarin, not used it very much, but beside the drawing pad from Community MVVM tool, is there the original Signpad?, second could you show how you create a barcode scanner? and a QR code scanner?
Hi! Great video! Thank you! It is very helpful for new people in .NET MAUI.
Now... quick one! Could it be possible to use DrawingView for drawing on a picture that is uploaded in the mobile´s screen and after that been able to keep and save the changes in the same file/pic? Any brilliant idea to share? Thanks a lot in advance!!
I am wondering the same thing
Nice 🥳
Glad you liked it!
Great videos all round and I have learnt a lot.
With the DrawingView, I have migrated an old application from Xamarin Forms that actually made use of the SignaturePad control. HOWEVER, the problem with the new DrawingView is that the lines and points generated are far fewer than what was generated in comparison to the old SignaturePad.
My question is how do we generate a full version of the signature on the server, given the lines/points generated by the DrawingView, because when we use the current server implementation and Lines/Points (which is far less in comparison to the SignaturePad), the signature is not complete, in fact it is VERY pixelated.
Thanks Edward! Maybe open an issue for that on the repo!
Hi @Gerald, It would be great to see more info on customizing the line. From the docs, it mentions creating a new type that inherits from IDrawLine as well as a new adaptor that inherits from IDrawingLineAdaptor. I don't see any examples of this in the samples.
Interesting idea thank you! I'll think about it!
Thanks, I can handle to save the drawing into something like sqlite or a file using the stream resource, but how can I set the drawing again into the DrawingView? for example, for edit a signature.
I have an issue. I tried to use two DrawingViews on the same page to capture two signatures, but when I sign on the first DrawView, it gets replicated on the second DrawView, and vice versa.
Thanks for sharing this. Could be useful. Being new to mobile development, what scale are the sizes in 200,200 -- 200 what -- I come from a WinForms background where it's all pixels, but here 200 can't be pixels as all the phones are different resolutions.
Everything is in DIP. ; device independent pixels. Scaling and resolutions and such are taken into account so it will be 200x200 on any screen
@@jfversluis Thanks, that gives me something to look into more.
I think DrawView renamed as DrawingView on CommunityToolkit and GetImageStream became an instance method, right?
Perfect. The examples don't specify the WidthRequest/HeightRequest which was driving me slightly crazy!
Oh feel free to open an issue or pr for that. Samples should just work!
I’m loving your content at the moment with Maui additions , however I feel I have backed myself into a corner and chose Maui blazor hybrid due to having strength in blazor, html and css, but it seems these fun little native things are xaml exclusive, is there any way to embed the xaml areas into blazor to help it become more fluent
You can’t add XAML in your razor files. You could choose to navigate to a XAML page at some point in your app and make a hybrid hybrid app 😂 but basically everything you can do with a regular .NET MAUI app you should be able to do with .NET MAUI Blazor
Oh and thank you! 😄
You can do it by using normal xaml content page and navigate to them with a shell, be carefull of the lifetime scope of your pages tho.
You can use query parameters and then messaging center to get data into your blazor components/viewmodels. It's duable I've implemented the ZXing BarcodeScanner into a Maui Blazor app.
Hi Gerald, thanks for what you do.Please, is there any plan to make CameraView available for .net maui?
Thank you Nacer! Yes, we’re working on it with the .NET MAUI Community Toolkit
@@jfversluis Thanks for you reply, any dates?
No dates unfortunately!
Hey, Man
I found your channel and your contents were good but I would like to ask about DataGrid Control for DotNet Maui, Do you know any Datagrid control for Maui, Most of them I have seen were paid and didn't find any Open Source alternative yet
Thank you Aathif! A data grid is a very, very complex control. I think that is the reason that there are not a lot of community versions out there. It will be a big burden to maintain.
Great video! I am wondering what the difference in usage between GraphicsView and DrawingView?
GraphicsView is more a view where you can the device draw things in a performant way. DrawingView allows the user to draw things on the screen
@@jfversluis i’m trying to change the GraphicsView background color to have it transparent, so as to have an image on the layer below it appear as a background for the canvas, but BackgroundColor doesn’t really do anything, do you know of a way around this issue?
What if I want to place a button to clear the drawing, how would it be?
DrawingView has a Clear() method, call that
I'm trying this with a Maui Blazor project, and I can't seem to get mct: to get recognized in my razor file. I'm using a navmenu, imported CommunityToolkit.Maui and CommunityToolkit.Maui.Views into _imports.razor and put the xlmns:mct line into MainPage.xaml. It doesn't throw an error, but it just doesn't render in the pixel 5 Android emulator. Am I missing an import to get the mct:DrawingView to be recognized in my .razor file under Pages?
You can’t render .NET MAUI controls in Blazor. If you want to do something like this you’ll have to implement a native page (not razor) and navigate to and from there. In this case it’s probably easier to use an HTML canvas though
How can I make a image editor? I need to make some lines and comments in an image. Like as a photo.
There is no simple answer to that, you’re basically asking how to implement a big complex feature of your app 😄
🤪@@jfversluis Alright, I didn't express very well. I would like some help to know how can I load an image and then edit and save it. With the DrawingView control is it possible? What is the best way to do this? What do you think about doing a video ? Like these amazing that you always had done.😁😁😁
Nice Features, can you do a Video on inserting images like this inside a PDF Document? Greetings
This might be helpful
Creating PDF Files in Mobile Apps with PdfSharp and MigraDoc - XamExpertDay 2021
th-cam.com/video/y0wmCkF8iTM/w-d-xo.html
@@jfversluis thanks for the quick answer ☺️
it keeps crashing when I open the app, but doesn't give/show an error in my code how can I figure out what the problem is?
Probably comb through the application log output. Do you have the UseCommunityToolkit() line in your MauiProgram.cs?
@@jfversluis yes, but I cant see the log output since my laptop cant run an emulator, I installed the application on my physical android phone
So MAUI Community Toolkit is different from Community Toolkit?
It's all under the same kind of name but different target audiences. Technically it's the .NET Community Toolkit which is framework agnostic and you can use it on any .NET project. And then there is the .NET MAUI Community Toolkit with all kinds of stuff specific to .NET MAUI
There is no drawing view in the old XCT (non-MAUI)
@@myidjoeystudios9582 Yes there is github.com/xamarin/XamarinCommunityToolkit/tree/main/src/CommunityToolkit/Xamarin.CommunityToolkit/Views/DrawingView
Amazing video !!
I have a question: If I need to add this functionality to draw on an image, how can I save the image with the shapes drawn? I watched the video to save the image, but I need to combine the image and the result from DrawingView ... Please guide me