Shadows Everywhere in Xamarin.Forms

As you know, Xamarin.Forms (and now .NET MAUI) allows us to create cross-platform mobile apps. However, one of the biggest challenges with these technologies is knowing how to customize your Controls and UI.

In this blog, we are going to explore some awesome libraries to add cool drop shadow effects to our projects.

Xamarin Community Toolkit’s ShadowEffect

In a previous blog, we used the Xamarin Community Toolkit to build Awesome Mobile Forms. Now, let’s use its ShadowEffects to customize the look of Labels and Frames.

1. Let’s start by adding Xamarin.CommunityToolkit in our project as a NuGet package.

2. Let’s add Xamarin.CommunityToolkit in our ContentPage.

3. That’s all. Let’s use it.

We can add the effect by adding xct:ShadowEffect.

We’ll set the following properties on XAML:

  • Color: is the shadow color.
  • Opacity: controls the opacity of the shadow.
  • Radius: controls the blurring.
  • OffsetX/OffsetY: specified the horizontal or vertical displacement.
<Label HorizontalOptions="Center" 
       VerticalOptions="Center" 
       Text="Shadows with Xamarin Toolkit"
       FontSize="18"
       xct:ShadowEffect.Color="Red"
       xct:ShadowEffect.OffsetX="5"
       xct:ShadowEffect.OffsetY="5"
       xct:ShadowEffect.Radius="2"
       xct:ShadowEffect.Opacity="0.8"/>
                
<Frame HasShadow="True" 
       CornerRadius="10" 
       WidthRequest="80"
       BackgroundColor="White"
       Padding="10"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       IsClippedToBounds="True"
       xct:ShadowEffect.Color="Red"
       xct:ShadowEffect.Radius="5"
       xct:ShadowEffect.Opacity="1"
       Margin="10">
    <Image Source="full_trailhead_logo.png" WidthRequest="80" />
</Frame>

Sharpnado.Shadows

Sharpnado.Shadows is a third-party library that helps us add shadows easily.

1. Let’s start by adding Sharpnado.Shadows in our project as a NuGet package.

2. Let’s add an Initialize in AppDelegate.cs on the iOS project.

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    Sharpnado.Shades.iOS.iOSShadowsRenderer.Initialize();
    LoadApplication(new App())
    return base.FinishedLaunching(app, options);
}

3. Let’s add Sharpnado.Shades in our ContentPage.

4. Let’s use it by setting the following properties:

  • Color: is the shadow color.
  • Opacity: controls the opacity of the shadow.
  • BlurRadius: controls the blurring.
  • Offset: specified the horizontal or vertical displacement.
  • CornerRadius: specified the size of the rounded corners of the shadow.
  • ImmutableShades: allows us to add more than one Shades.

We can define a SingleShade:

<sh:Shadows Margin="0,0,0,5" 
            Shades="{sh:SingleShade Offset='2,5',
                                    Opacity=0.4,
                                    BlurRadius=3,
                                    Color=#00B0FB}" 
            CornerRadius="10">
    <Label Text="Shadows with a Single Sharpnado.Shadows" FontSize="18" HorizontalOptions="Center"/>
</sh:Shadows>

or multiple shadows at one:

<sh:Shadows CornerRadius="10" Margin="0,10,0,0">
    <sh:Shadows.Shades>
        <sh:ImmutableShades>
            <sh:Shade BlurRadius="10"
                      Opacity="0.5"
                      Offset="10,10"
                      Color="#0076AE" />
            <sh:Shade BlurRadius="10"
                      Opacity="0.5"
                      Offset="-10,-10"
                      Color="Orange" />
        </sh:ImmutableShades>
    </sh:Shadows.Shades>
    <Frame WidthRequest="80"
           Padding="10"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           BackgroundColor="White"
           CornerRadius="10">
        <Image Source="full_trailhead_logo.png" WidthRequest="80" />
    </Frame>
</sh:Shadows>

A Note on .NET MAUI

The Xamarin Community Toolkit is available to use with .NET MAUI. However, it throws an exception if you try to use a ShadowEffect:

No service for type 'Microsoft.Maui.Controls.Hosting.EffectsFactory' has been registered.

Unfortunately, there also is no current version of the Sharpnado.Shadows library available for .NET MAUI. But don’t worry, the Microsoft team has released a built-in Shadow class that we can use instead.

See my example of using it below setting the following properties:

  • Radius: controls the blurring.
  • Opacity: controls the opacity of the shadow.
  • Brush: represents the brush used to colorize the shadow.
  • OffSet: specified the horizontal or vertical displacement.
<Image
    Source="full_trailhead_logo.png"
    SemanticProperties.Description="Trailhead logo"
    HeightRequest="200"
    HorizontalOptions="Center" >
    <Image.Shadow>
        <Shadow Brush="Black"
                Offset="20,20"
                Radius="40"
                Opacity="0.8" />
    </Image.Shadow>
</Image>

Conclusion

That’s all. The code is available on GitHub for you to review. Happy coding!

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you for reaching out.

You’ll be getting an email from our team shortly. If you need immediate assistance, please call (616) 371-1037.