New Features in Xamarin.Forms 4.8: Gradients, Brushes, and Flyout Backdrop Color
Tags: xamarin, csharp, android, ios
Published: 2020-09-03 12:27:14

---
title: New Features in Xamarin.Forms 4.8: Gradients, Brushes, and Flyout Backdrop Color
published: true
date: 2020-09-03 11:57:48 UTC
tags: xamarin, csharp, android, ios
canonical_url: https://www.syncfusion.com/blogs/post/new-features-in-xamarin-forms-4-8-gradients-brushes-and-flyout-backdrop-color.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8d5woy7ao9qlroovu32n.png
---

Our world is constantly evolving, and the technology field has seen some of the biggest changes. Further proof of this arrived on August 7, when Xamarin.Forms was updated again. Now, we have version 4.8, which delivered a collection of features that allow developers to create more interactive and attractive applications.

In this article, I am going to focus on two features available in the new Xamarin.Forms 4.8 release:

- [Gradients and Brushes](#gradients-and-brushes)
- [Flyout Backdrop Color](#flyout-backdrop-color) 

Let’s get started!

## Gradients and brushes

In order to paint an area in our application, we have to use a brush. Brushes come in different types to produce different outputs.

The types of brushes available are:

- Solid Colors
- Linear Gradients
- Radial Gradients

### Solid colors

The solid color brush allows us to paint an area with a solid color, as its name indicates. Here is an example using XAML code.

```html
<Frame Background="DarkGreen"
       BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120"/>
```

This XAML produces the following output.

![Solid Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2020/09/Solid-Colors-1.png)<figcaption>Source: <a href="https://github.com/LucioMSP/Xamarin.Forms.Examples/blob/master/Gradients_Brushes/ScreenShots/SolidColor.png">Vicente Guzman on GitHub</a></figcaption>

### Linear gradient

The linear gradient brush allows us to combine two or more colors in a gradient. See the green to yellow linear gradient in the following screenshot.

![Linear Gradients](https://www.syncfusion.com/blogs/wp-content/uploads/2020/09/Linear-Gradients-2.png)<figcaption>Source: <a href="https://github.com/LucioMSP/Xamarin.Forms.Examples/blob/master/Gradients_Brushes/ScreenShots/LinearGradient.png">Vicente Guzman GitHub</a></figcaption>

To use the linear gradient, we need to know where to use the StartPoint and EndPoint properties. If we want to implement the gradient in the previous screenshot, we would code it as follows.

```html
<Frame BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
       <Frame.Background>
              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
               <GradientStop Color="Green" Offset="0.1"/>
               <GradientStop Color="Orange" Offset="1.0"/>
              </LinearGradientBrush>
       </Frame.Background>
</Frame>
```

### Radial gradient

The last type of brush now available in Xamarin.Forms 4.8 is the radial gradient, which allows us to mix two or more colors in a gradient with a circular shape. Like the previous gradient, this one requires us to determine two properties: **Center** to specify the location of the center of the gradient, and **Radius** to determine the size of the radius of the gradient.

The following code example creates a radial gradient with green in the middle, changing to yellow on the edges.

```html
<Frame BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
       <Frame.Background>
         <RadialGradientBrush Center="0.5,0.5" Radius="0.5">
               <GradientStop Color="DarkGreen" Offset="0.1"/>
               <GradientStop Color="Yellow" Offset="1.0"/>
         </RadialGradientBrush>
       </Frame.Background>
</Frame>
```

This  code example produces the output shown in the following screenshot.

![Radial Gradient](https://www.syncfusion.com/blogs/wp-content/uploads/2020/09/Radial-Gradient.png)<figcaption>Source: <a href="https://github.com/LucioMSP/Xamarin.Forms.Examples/blob/master/Gradients_Brushes/ScreenShots/RadialGradient.png">Vicente Guzman GitHub</a></figcaption>

## Flyout backdrop color

Many applications feature a drop-down menu that is accessed through a hamburger icon. In previous versions of Xamarin.Forms, we did not have the ability to edit the appearance of the menu when opening and closing it. We had to use the device’s default design as provided by the operating system.

Thanks to Xamarin.Forms 4.8, we can now easily customize the appearance of the menu in our application with the flyout backdrop color feature.

The following GIF shows the flyout backdrop color feature in action.

![Flyout Backdrop Color](https://www.syncfusion.com/blogs/wp-content/uploads/2020/09/Flyout-Backdrop-Color.gif)<figcaption>Source: <a href="https://github.com/LucioMSP/Xamarin.Forms.Examples/blob/master/FlyoutBackDrop/ScreenShots/FlyoutBackdropColor.gif">Vicente Guzman GitHub</a></figcaption>

If you’re wondering whether we can combine the flyout backdrop color feature with the brushes and gradients discussed previously, the answer is yes! All we have to do is define a brush and assign its values to the property **Shell.FlyoutBackdrop**. Here is an example:

```html
<FlyoutItem Route="stores"
            FlyoutDisplayOptions="AsMultipleItems">
        <Shell.FlyoutBackdrop>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="1,1">
              <GradientStop Color="#8A2387"
                            Offset="0.1" />
              <GradientStop Color="#E94057"
                            Offset="0.6" />
              <GradientStop Color="#58ADF4"
                            Offset="1.0" />
          </LinearGradientBrush>
      </Shell.FlyoutBackdrop>
 
      <ShellContent Route="stores"
            ContentTemplate="{DataTemplate views:NationalPage}" />
</FlyoutItem>
```

You can find examples of these new features in Xamarin.Forms 4.8 on GitHub:

- [Gradients and Brushes](https://github.com/LucioMSP/Xamarin.Forms.Examples/tree/master/Gradients_Brushes)
- [Flyout Backdrop Color](https://github.com/LucioMSP/Xamarin.Forms.Examples/tree/master/FlyoutBackDrop)

More information about these features is available in Microsoft’s documentation:

- [Brushes](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/) and [Gradients](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/gradient)
- [Flyout Backdrop Color](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout)

## Conclusion

In this blog, we have learned about two new colorful features in Xamarin.Forms 4.8: gradients and brushes, and the flyout backdrop color. These features help us design elegant, attractive UIs in our applications.

So, let’s build charming Xamarin.Forms applications with these new features!

[Syncfusion](https://www.syncfusion.com/xamarin-ui-controls) offers over 150 UI controls for Xamarin, from basic editors to powerful, advanced controls like DataGrid, Charts, ListView, and RTE. Use them to boost your productivity!

For current Syncfusion customers, the latest version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out all the available features. Also, check out our samples at this [GitHub](https://github.com/syncfusion) location.

If you want to send us feedback, please use the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms). We are always happy to assist you!

If you liked this post, we think you’ll also like the following:

- [Blog] [New Features in Xamarin.Forms 4.7: Multibinding, Light and Dark Modes](https://dev.to/syncfusion/new-features-in-xamarin-forms-4-7-multibinding-light-and-dark-modes-30ml)
- [Blog] [Replicating a Drink and Food Menu UI in Xamarin.Forms](https://dev.to/syncfusion/replicating-a-drink-and-food-menu-ui-in-xamarin-forms-28fd)
- [Blog] [Goodbye Xamarin.Forms, Hello MAUI!](https://dev.to/syncfusion/goodbye-xamarin-forms-hello-maui-g85)
- [Ebook] [Xamarin.Forms Succinctly](https://www.syncfusion.com/ebooks/xamarin-forms-succinctly)