{"id":9427,"date":"2022-09-05T18:41:53","date_gmt":"2022-09-05T18:41:53","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=9427"},"modified":"2022-09-05T18:41:53","modified_gmt":"2022-09-05T18:41:53","slug":"creating-a-drawable-control-in-maui","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/creating-a-drawable-control-in-maui\/","title":{"rendered":"Creating a drawable control in MAUI"},"content":{"rendered":"

MAUI includes relatively primitive graphics drawing options for the developer. Your class can implement the IDrawable interface and be assigned to a GraphicsView visual element.<\/p>\n

So for example, let’s implement a barebones IDrawable<\/p>\n

\r\ninternal class MyDrawable : IDrawable\r\n{\r\n    public void Draw(ICanvas canvas, RectF dirtyRect)\r\n    {\r\n        canvas.DrawRectangle(1, 1, dirtyRect.Width, dirtyRect.Height);\r\n    }\r\n}\r\n<\/pre>\n
Obviously this does very little of interest except draws a rectangle in the view area that the code which hosts the drawable take up.<\/p>\n
So to display this in our XAML we declare the drawable as a resource, like this<\/p>\n
\r\n<ContentPage.Resources>\r\n   <drawables:MyDrawable x:Key="MyDrawable" \/>\r\n<\/ContentPage.Resources>\r\n<\/pre>\n
Finally we assign this drawable to a Graphics views which hosts the drawable like this<\/p>\n
\r\n<GraphicsView Drawable="{StaticResource MyDrawable}"\r\n   HeightRequest="120"\r\n   WidthRequest="400" \/>\r\n<\/pre>\n
The ICanvas used within the IDrawable offers a lot of methods to draw lines, rectangles, text etc. <\/p>\n
Note: It reminds me of the Canvas in Delphi all those many years back.<\/em><\/p>\n
Ofcourse, we might prefer to remove the requirement of using resources and the GraphicsView. We’re not really removing them so much as just creating our own GraphicsView, so for example let’s create our control like this<\/p>\n
\r\npublic class MyGraphics : GraphicsView\r\n{\r\n    public MyGraphics()\r\n    {\r\n        Drawable = new MyDrawable();\r\n    }\r\n}\r\n<\/pre>\n
and now we can just use like this<\/p>\n
\r\n<MyGraphics \r\n   HeightRequest="120"\r\n   WidthRequest="400" \/>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
MAUI includes relatively primitive graphics drawing options for the developer. Your class can implement the IDrawable interface and be assigned to a GraphicsView visual element. So for example, let’s implement a barebones IDrawable internal class MyDrawable : IDrawable { public void Draw(ICanvas canvas, RectF dirtyRect) { canvas.DrawRectangle(1, 1, dirtyRect.Width, dirtyRect.Height); } } Obviously this does […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[330],"tags":[],"class_list":["post-9427","post","type-post","status-publish","format-standard","hentry","category-maui"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=9427"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9427\/revisions"}],"predecessor-version":[{"id":9470,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9427\/revisions\/9470"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=9427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=9427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=9427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}