{"id":47582,"date":"2020-07-23T09:42:33","date_gmt":"2020-07-23T16:42:33","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=47582"},"modified":"2020-07-23T09:43:24","modified_gmt":"2020-07-23T16:43:24","slug":"xamarin-forms-shapes-and-paths","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-shapes-and-paths\/","title":{"rendered":"Drawing UI with Xamarin.Forms Shapes and Paths"},"content":{"rendered":"

Xamarin.Forms 4.7 introduces drawing controls for Shapes and Paths. These are powerful new cross-platform controls that use the familiar control syntax from UWP and WPF. As well as use the native graphics libraries on each target platform. SkiaSharp<\/a> and NGraphics<\/a> have long been the “Go-To” solutions for rendering drawn UI to support advanced designs. They also continue to be excellent choices based on your individual needs. Now Shapes and Paths bring the power of drawing closer to you by shipping “in-the-box”.<\/p>\n

\"Ellipse,<\/p>\n

Shapes<\/h2>\n

There are many built-in controls available in the new API including ellipse, line, polygon, polyline, and rectangle. Each of these shapes support common styling properties. Such as aspect, fill, and a variety of stroke options. Here are two examples where these shapes help quickly implement a design.<\/p>\n

\n

Enable the Flag<\/strong> – Shapes are an experimental preview. First add the flag<\/a> to your App.xaml.cs<\/code> at the top of the constructor: Device.SetFlags(new string[]{ \"Shapes_Experimental\" });<\/code>.<\/p>\n<\/blockquote>\n

Custom Step Indicator<\/h3>\n

When design requires the use of primitive shapes, using these graphics are a huge time-saver. Consider this custom progress indicator design that shows circles separated by dashes:<\/p>\n

\"\"<\/p>\n

<StackLayout Orientation=\"Horizontal\" HorizontalOptions=\"Center\" >\n    <StackLayout.Resources>\n        <Style TargetType=\"Ellipse\">\n            <Setter Property=\"Fill\" Value=\"#33222222\"\/>                    \n            <Setter Property=\"WidthRequest\" Value=\"20\"\/>\n            <Setter Property=\"HeightRequest\" Value=\"20\"\/>\n            <Setter Property=\"VerticalOptions\" Value=\"Center\"\/>\n        <\/Style>\n        <Style TargetType=\"Line\">\n            <Setter Property=\"Stroke\" Value=\"#33222222\"\/>\n            <Setter Property=\"X2\" Value=\"40\"\/>\n            <Setter Property=\"VerticalOptions\" Value=\"Center\"\/>\n        <\/Style>\n    <\/StackLayout.Resources>\n\n    <Ellipse Fill=\"#FF9900\" \/>\n    <Line \/>\n    <Ellipse \/>\n    <Line \/>\n    <Ellipse \/>\n<\/StackLayout>\n<\/code><\/pre>\n
Take this even further and use a VisualStateManager<\/code> to customize the behavior!<\/p>\n
Circle Image<\/h3>\n
One of the most powerful uses of shapes is the ability to clip other controls. This is also called “masking”. In this example, a square profile image can become a circle by applying an EllipseGeometry<\/code> to the Image.Clip<\/code> property.<\/p>\n
\"Circle<\/p>\n
<Grid ColumnDefinitions=\"*,279,*\" \n          RowDefinitions=\"*,160,350,*\">\n\n    <!-- Profile Circle Image -->\n    <Ellipse\n        Grid.Row=\"1\"\n        Grid.Column=\"1\"\n        HorizontalOptions=\"Center\"\n        VerticalOptions=\"Center\"\n        WidthRequest=\"168\"\n        HeightRequest=\"168\"\n        Stroke=\"#FFFF9900\"\n        StrokeThickness=\"4\"\n        Fill=\"White\"\/>\n    <Image\n        Grid.Row=\"1\"\n        Grid.Column=\"1\"\n        HorizontalOptions=\"Center\"\n        VerticalOptions=\"Center\"\n        WidthRequest=\"150\"\n        HeightRequest=\"150\"        \n        Source=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/03\/Screen-Shot-2017-01-03-at-3.35.53-PM-150x150.png\">\n        <Image.Clip>\n            <EllipseGeometry\n                Center=\"75,75\"\n                RadiusX=\"75\"\n                RadiusY=\"75\"\/>\n        <\/Image.Clip>\n    <\/Image>\n\n    <!-- Login Form -->\n<\/Grid>\n<\/code><\/pre>\n
The above code does more than just clip the image. It uses another Ellipse<\/code> to create a border effect around the photo by setting a white fill and an orange stroke.<\/p>\n
Paths<\/h2>\n
Use Paths for irregular shapes and even custom designs. If you have been using SVG images, then you are already using paths. Open any SVG in a text editor and see a Path node in the XML with a data string to copy directly into your Xamarin.Forms XAML. That is how the shape in the login view pictured above was created.<\/p>\n
<Path\n    HorizontalOptions=\"Fill\"\n    VerticalOptions=\"Fill\"\n    Fill=\"{AppThemeBinding Dark=#333333, Light=#FFFFFF}\"\n    Data=\"M251,0 C266.463973,-2.84068575e-15 279,12.536027 279,28 L279,276 C279,291.463973 266.463973,304 251,304 L214.607,304 L214.629319,304.009394 L202.570739,304.356889 C196.091582,304.5436 190.154631,308.020457 186.821897,313.579883 L186.821897,313.579883 L183.402481,319.283905 C177.100406,337.175023 160.04792,350 140,350 C119.890172,350 102.794306,337.095694 96.5412691,319.115947 L96.5273695,319.126964 L92.8752676,313.28194 C89.5084023,307.893423 83.6708508,304.544546 77.3197008,304.358047 L65.133,304 L28,304 C12.536027,304 1.8937905e-15,291.463973 0,276 L0,28 C-1.8937905e-15,12.536027 12.536027,2.84068575e-15 28,0 L251,0 Z\"\n    \/>\n<\/code><\/pre>\n
\n
Notice in the above code, the Fill color is set using an AppThemeBinding so it will respond to dark and light themes.<\/p>\n<\/blockquote>\n
Community Ignited<\/h2>\n
It has been a pleasure watching the Xamarin.Forms community rapidly generate so many good looking design challenges using the new Shapes and Paths controls. Here are a few that might inspire you:<\/p>\n\n\n\n
\n      \n    <\/td>\n\n      \n    <\/td>\n\n      \n    <\/td>\n<\/tr>\n
\n      Source<\/a>\n    <\/td>\n\n      Source<\/a>\n    <\/td>\n\n      Source<\/a>\n    <\/td>\n<\/tr>\n<\/table>\n\n\n\n
\n      \n    <\/td>\n\n      \n    <\/td>\n\n      \n    <\/td>\n<\/tr>\n
\n      Source<\/a>\n    <\/td>\n\n      Source<\/a>\n    <\/td>\n\n      Video<\/a>\n    <\/td>\n<\/tr>\n<\/table>\n
And the list goes on! Here are some others to explore:<\/p>\n