How to set a Gradient or an Image as TitleBar or Shell Background in MAUI application

Viewed 197

I was trying out .NET MAUI to get more comfortable with the framework. But, I encountered one problem while I was trying to set an image as a background of TitleBar / AppBar / ActionBar.

First, I have tried to add Shell.Background property and set it value to title_bar.png (which is located inside Resources > Images folder) like

<ResourceDictionary>
    <Style TargetType="Shell" ApplyToDerivedTypes="True">
        <Setter Property="Shell.Background" Value="title_bar.png" />
        ....
    </Style>
</ResourceDictionary>

in Resources > Styles > Styles.xaml file. But, it was not working.

Then I was searching for a solution and I found this github issue in Xamarin.Forms repo.

After that, I was trying to set a gradient as a background of TitleBar / AppBar / ActionBar but it was also not working. More specifically changing the project's Resources > Styles > Styles.xaml file's "Shell.BackgroundColor" property's Value to any color is working but when I am trying to set the value like

<ResourceDictionary>
    <Style TargetType="Shell" ApplyToDerivedTypes="True">
        ...
        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource TitleBarGradient}, Dark={StaticResource TitleBarGradient}}" />
        ....
    </Style>
</ResourceDictionary>

but it's also not working (Background changed to white).

I have added the below lines of code in Resources > Styles > Colors.xaml file

</ResourceDictionary>
    ...
    <LinearGradientBrush
        x:Key="TitleBarGradient"
        EndPoint="1,0">
        <GradientStop
            Color="{StaticResource Yellow100Accent}"
            Offset="0.1" />
        <GradientStop
            Color="{StaticResource Blue200Accent}"
            Offset="1.0" />
    </LinearGradientBrush>
</ResourceDictionary>

So, my question is am I doing something wrong or it's a bug or missing feature?

0 Answers
Related