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.
| <Grid Grid.Row="2" Margin="-30,0"> | |
| <Line Style="{StaticResource DivisionLine}" /> | |
| <Path Data="M0 26C7.1797 26 13 20.1797 13 13C13 5.8203 7.1797 0 0 0V26Z" Fill="#EFEFEF" StrokeThickness="0"/> | |
| <Path Data="M13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26L13 0Z" Fill="#EFEFEF" | |
| StrokeThickness="0" | |
| HorizontalOptions="End" | |
| /> | |
| </Grid> |
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…
Top comments (0)