{"id":47726,"date":"2020-08-07T09:22:19","date_gmt":"2020-08-07T16:22:19","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=47726"},"modified":"2020-08-07T09:22:24","modified_gmt":"2020-08-07T16:22:24","slug":"xamarinforms-4-8-gradients-brushes","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarinforms-4-8-gradients-brushes\/","title":{"rendered":"Xamarin.Forms 4.8 – Gradients & Brushes, Drag & Drop, and More!"},"content":{"rendered":"

Today marks the release of Xamarin.Forms 4.8. With a collection of features and quality improvements, Xamarin.Forms will give you even more opportunities to build colorful, interactive cross-platform applications. Let us take a dive into all of the new features coming to you in Xamarin.Forms!<\/p>\n

Gradients and Brushes<\/h2>\n

Xamarin.Forms is releasing experimental support for Gradients and Brushes. Brush allows you to “paint” an area of your application with the brushes output, and different brushes have different types of output. There are three types of brushes: Solid Colors, Linear Gradients, and Radial Gradients.<\/p>\n

Solid color brush allows you to paint an area with a solid color. Below, see an example of the XAML code used to create a solid gradient:<\/p>\n

<Frame Background=\"DarkBlue\"\n       BorderColor=\"LightGray\"\n       HasShadow=\"True\"\n       CornerRadius=\"12\"\n       HeightRequest=\"120\"\n       WidthRequest=\"120\"\/><\/pre>\n
The above XAML creates the corresponding solid gradient, seen below:<\/p>\n
\n  \"Solid\n<\/center><\/p>\n
Linear gradient brush allows you to blend two (or more) colors together into a beautiful gradient. Decide where the gradient starts using the StartPoint<\/code> property and the EndPoint<\/code> property. Furthermore, these properties can be the targets of data bindings! Below, find an example of the XAML code used to create a linear gradient:<\/p>\n
<Frame BorderColor=\"LightGray\"\n       HasShadow=\"True\"\n       CornerRadius=\"12\"\n       HeightRequest=\"120\"\n       WidthRequest=\"120\">\n    <Frame.Background>\n        <LinearGradientBrush StartPoint=\"0,0\"\n                             EndPoint=\"1,0\">\n            <GradientStop Color=\"Yellow\"\n                          Offset=\"0.1\"\/>\n            <GradientStop Color=\"Green\"\n                          Offset=\"1.0\"\/>\n        <\/LinearGradientBrush>\n    <\/Frame.Background>\n<\/Frame><\/pre>\n
This XAML creates the corresponding linear gradient, seen below: 
\n  \"A\n<\/center><\/p>\n
Radial gradient paints the designated area with a radial gradient. Which allows the blending of two or more colors across a circle. You can also decide the center of the gradient using the Center<\/code> property. As well as the radius of the gradient using the Radius<\/code> property. Just like the linear gradient brush, the properties of the radial gradient brush are also bindable! Here is an example of the XAML code used to create a radial gradient:<\/p>\n
<Frame BorderColor=\"LightGray\"\n       HasShadow=\"True\"\n       CornerRadius=\"12\"\n       HeightRequest=\"120\"\n       WidthRequest=\"120\">\n    <Frame.Background>\n        <RadialGradientBrush Center=\"0.5,0.5\"\n                             Radius=\"0.5\">\n            <GradientStop Color=\"Red\"\n                          Offset=\"0.1\"\/>\n            <GradientStop Color=\"DarkBlue\"\n                          Offset=\"1.0\"\/>\n        <\/RadialGradientBrush>\n    <\/Frame.Background>\n<\/Frame><\/pre>\n
The above XAML creates the corresponding radial gradient, seen below: 
\n  \"Xamarin.Forms\n<\/center><\/p>\n
Brushes and gradients allow your full creative abilities to be released through Xamarin.Forms! For more information, take a look at the brushes and gradients docs here<\/a>.<\/p>\n
Drag & Drop<\/h2>\n
Now, drag and drop items in your applications with Xamarin.Forms 4.8! By using drag and drop, move an item from one location to another in the application, or even to a different application! 
\n  \"Animation\n<\/center><\/p>\n
There are a few steps to go through when enabling drag and drop in an application:<\/p>\n
1. Add a DragGestureRecognizer object to its GestureRecognizers collection.<\/p>\n
2. Build a data package. For image and text controls, Xamarin.Forms automatically will make the data package for you! For other content you will need to construct your own data package.<\/p>\n
3. Enable drop on an item by adding a DropGestureRecognizer<\/code> object to its GestureRecognizers collection. Then setting the DropGestureRecognizer.AllowDrop<\/code> property to True.<\/p>\n
4. If needed, set the DropGestureRecognizer.DragOver<\/code> event to indicate the type of operation that should be performed.<\/p>\n
5. If needed, process the data package to receive the dropped content. Xamarin.Forms automatically processes the data package for images and text. However, for other content you will need to process the data package yourself.<\/p>\n
Drag & drop is a great new gesture implemented in Xamarin.Forms to give you even more ways to interact with your application! Please note that this is shipping experimentally and you must enable the DragAndDrop_Experimental<\/strong><\/a> flag. For more information about Drag & drop, see the docs here<\/a>!<\/p>\n
Flyout Backdrop Color<\/h2>\n
The introduction of the flyout backdrop color makes the shell is even more customizable! Changing the the flyout backdrop color changes the color of the overlay that covers the page of your application when opening the flyout backdrop. 
\n  
https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/08\/2020-07-26_21-17-44.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n
This new feature works by using another new feature. In order to set the flyout backdrop color, set the Shell.FlyoutBackdrop<\/code> property to a Brush.<\/p>\n
One amazing part of this feature is that it actually works with another new features: brushes & gradients! Once enabling the brushes feature, define a solid, gradient, or radial brush. Then assign it to the Shell.FlyoutBackdrop<\/code> property. An example of the XAML that defines and assigns the brush to the flyout is displayed below:<\/p>\n
<Shell ...>\n    <FlyoutItem ...>\n      <Shell.FlyoutBackdrop>\n          <LinearGradientBrush StartPoint=\"0,0\"\n                               EndPoint=\"1,1\">\n              <GradientStop Color=\"#8A2387\"\n                            Offset=\"0.1\" \/>\n              <GradientStop Color=\"#E94057\"\n                            Offset=\"0.6\" \/>\n              <GradientStop Color=\"#F27121\"\n                            Offset=\"1.0\" \/>\n          <\/LinearGradientBrush>\n      <\/Shell.FlyoutBackdrop>\n      ...\n    <\/FlyoutItem>\n    ...\n<\/Shell><\/pre>\n
By combining brushes and the flyout backdrop, you now have more control over the design of your flyouts! To learn more, look at the flyout docs<\/a>.<\/p>\n
Featured Contributor<\/h2>\n
Xamarin.Forms has dozens of contributors<\/a> constantly working to ensure a great experience. The Xamarin team wants to highlight individuals in our community who have constantly contributed to the success of Xamarin.Forms. Today we are highlighting Pedro!<\/p>\n\n\n
\n      \"Image\n    <\/td>\n\n      What is your name?<\/b>
 Pedro Henrique de Souza Jesus <\/p>\n
 Where are you based?<\/b>
Brazil, state of Minas Gerais<\/p>\n
 How long have you been using Xamarin.Forms?<\/b>
Three Years<\/p>\n
 What was the first application you developed?<\/b>
 An auxiliary tool to buy beer <\/p>\n
 What is your favorite NuGet package?<\/b>
 Xamarin.Essentials <\/p>\n
 Where can people find you online?<\/b>
 Twitter<\/a> & Github<\/a>\n    <\/td>\n<\/tr>\n<\/table>\n
Get Started Today<\/h2>\n
Update your projects from your favorite NuGet package manager<\/a> today! Take advantage of the latest release<\/a>. Share your projects and progress with us online.<\/p>\n
We love your feedback on Xamarin Forms. Please open issues on GitHub<\/a> for any additional enhancements or issues to discuss. For more information on this release check the resources below.<\/p>\n