Gradient as Shell's background in .NET MAUI

Question

Any idea how I can have a gradient background for a Shell?


I tried defining a LinearGradientBrush on my Shell 's background but that didn't work.

<?xml version="1.0" encoding="UTF-8" ?> <Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Shell.Background>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
</Shell.Background>

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <!--  FlyoutItem contents here -->
</FlyoutItem>

</Shell>

Answer 1

Hello,

I can reproduce this issue and this issue have reported to the MAUI Github repo Shell.Background - Gradient does not work .

However, you can set gradient background separately. If you want to make shellcontent' background to the gradient background, you can add gradient background to the Contentpage's Background property.

  <ContentPage.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </ContentPage.Background>

If you have a Shell flyout, you can set the gradient background for shell flyout item.

<Shell.FlyoutBackground>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </Shell.FlyoutBackground>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.