Drawing Paths for Xamarin.Forms

David Ortinau - Dec 22 '20 - - Dev Community

In the category of "did you know", Xamarin.Forms supports drawing primitive shapes and complex paths. For both, the Figma design tool is my choice lately to quickly copy the drawing code into Visual Studio to use in Xamarin.Forms XAML. Just about every design tool now has this "copy as svg" type of option.

Resources:

BillDetailSample

These are the changes I made upgrading this layout from Xamarin.Forms to .NET MAUI.

Spacing

Grid and stack layouts in .NET MAUI have 0 spacing by default, so anything I was inheriting from defaults in Xamarin.Forms was gone. I could have added that back as a base style, or as in this case I just added it where I saw I needed it.

Border

I replaced PancakeView, which is a jazzed up Frame, and Frame with Border. Not only is it a .NET MAUI first class citizen by comparison, but it just behaves better. The one issue I found was that the logo image was clipped at the top by the Border and I couldn't use the layout property to forego that. The solution was to move the image out of the Border into the parent Grid and located it above by moving it down in…

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .