How to set opacity on BackgroundImageSource in c# code using xamarin

Question

I set BackgroundImageSource on the screen with this code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="WeatherLocationInfo.MainPage"
         BackgroundImageSource="Images/Scattering.jpg"
         xmlns:controls="clr-namespace:MarcTron.Plugin.Controls;assembly=Plugin.MtAdmob"
         xmlns:local="clr-namespace:WeatherLocationInfo"
         xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms">

In c# code in my MainPage.xaml.cs I check for the weather condition and set different backgrounds depending on weather conditions with this code:

string description = weatherBindingData.WeatherDataForecastHourly.List[0].WeatherForecast[0].DescriptionForecast;
                
                if (description == "clear sky")
                {
                    this.BackgroundImageSource = "Images/ClearSky.jpg";
                }
                else if (description == "few clouds")
                {
                    this.BackgroundImageSource = "Images/FewClouds.jpg";
                }
                else if (description == "scattered clouds")
                {
                    this.BackgroundImageSource = "Images/Scattering.jpg";
                }
                else if (description == "broken clouds")
                {
                    this.BackgroundImageSource = "Images/BrokenClouds.jpg";
                }
                else if (description == "light rain")
                {
                    this.BackgroundImageSource = "Images/LightRain.jpg";
                }
                else if (description == "rain")
                {
                    this.BackgroundImageSource = "Images/Rain.jpg";
                }
                else if (description == "thunderstorm")
                {
                    this.BackgroundImageSource = "Images/Thunderstorm.jpg";
                }
                else if (description == "snow")
                {
                    this.BackgroundImageSource = "Images/Snow.jpg";
                }
                else if (description == "mist")
                {
                    this.BackgroundImageSource = "Images/Mist.jpg";
                }
                else if (description == "overcast clouds")
                {
                    this.BackgroundImageSource = "Images/OverCastClouds.jpg";
                }
                else if (description == "moderate rain")
                {
                    this.BackgroundImageSource = "Images/ModerateRain.jpg";
                }

I want to set opacity 0.3 on every background image. In c# not have property this.BackgroundImageSource.opacity. Is there a way to set the opacity on the images ?

Answer 1

You could use a grid and add a image to set as background with Opacity.

  <Grid>
    <Image
        Aspect="AspectFill"
        Opacity="0.3"
        Source="pink.jpg" />
    <StackLayout Padding="15">
        <Image
            Aspect="AspectFit"
            HeightRequest="100"
            Source="truck_black.png"
            WidthRequest="130" />
    </StackLayout>
    <ScrollView>
        <StackLayout Spacing="0">
            <StackLayout Padding="15,7,15,15" VerticalOptions="StartAndExpand">
                <StackLayout VerticalOptions="StartAndExpand">
                    <Label
                        FontSize="14"
                        Text="Company Code"
                        TextColor="Black" />
                    <Entry
                        x:Name="companyCodeEntry"
                        FontSize="14"
                        Text=""
                        TextColor="Black" />
                    <Label
                        FontSize="14"
                        Text="Username"
                        TextColor="Black" />
                    <Entry
                        x:Name="usernameEntry"
                        FontSize="14"
                        Text=""
                        TextColor="Black" />
                    <Label
                        FontSize="14"
                        Text="Password"
                        TextColor="Black" />
                    <Entry
                        x:Name="passwordEntry"
                        FontSize="14"
                        IsPassword="true"
                        Text=""
                        TextColor="Black" />
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </ScrollView>
</Grid>