CODEWITHSUNDEEP
c#xamlxamarinbackgroundxamarin.forms
Jonathan
Jonathan

Reputation: 686

Xamarin.Forms, XAML - How to display image with color overlay

I'm building a layout in my Xamarin.Forms app, and I need to display an image with a transparent color overlay. I have a Grid layout that displays the image and stacks a ContentView on top of it with a semitransparent background color. As you can see in the images below, the ContentView (and I suspect the containing Grid) simply refuses to shrink to the size of the image (the largest item in the Grid).

How can I do this?

I've tried all kinds of different VerticalOptions on the different views and nothing I've done so far has worked, but I'm new to Forms so confirm if you think the solution might be basic. :)

Thanks in advance!

Here's the code:

<Grid VerticalOptions="Start">
    <Image Source="PlayerBackground.png" />
    <ContentView BackgroundColor="#88000000"></ContentView>
    <StackLayout VerticalOptions="Center">
        <Image/>
        <Label/>
    </StackLayout>
</Grid>

Here's what it's supposed to look like:

Mockup

And here's what I'm actually getting:

iOS simulator screenshot

Upvotes: 3

Views: 6957

Answers (4)

innom
innom

Reputation: 997

if you use FF CachedImage, you can apply color overlay like so:

img_radar.Transformations.Add(new TintTransformation() { HexColor = "ffffff" });

forms:CachedImage Source="img_radar_off" x:Name="img_radar" Grid.Row="1" Grid.Column="1">
                        <forms:CachedImage.GestureRecognizers>
                             <TapGestureRecognizer Tapped="tapped_radar"/>
                        </forms:CachedImage.GestureRecognizers>
                    </forms:CachedImage>

Upvotes: 0

Curiosity
Curiosity

Reputation: 1931

You can try using IconView which is very handy. As per your solution, you can try as follows.

First include IconView.cs in your Xamarin.Forms project.

Then try the following. 

<Grid VerticalOptions="Start">
    <local:IconView Source="PlayerBackground.png"
        VerticalOptions="Fill" HorizontalOptions="Fill"
        Foreground="Green"/>

    <local:IconView Source="Bird.png"
        VerticalOptions="Center" HorizontalOptions="Center"
        Foreground="Blue"/>
</Grid>

Change the Foreground value to whatever colour you want. Hope this answers your problem.

Upvotes: 0

oridotaoyebode
oridotaoyebode

Reputation: 11

Try setting the HorizontalOptions and Vertical Options on the ContentView.

Also you can use a Grid instead of a ContentView with HorizontalOptions and VerticalOptions set to FillAndExpand

Upvotes: 0

Daniel Luberda
Daniel Luberda

Reputation: 7454

Aspect property is the key. 

   <Grid HorizontalOptions="Fill" VerticalOptions="Fill">
        <Image HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" Source="PlayerBackground.png" />
        <BoxView HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="#000000" Opacity="0.8"/>
    </Grid>

Or you could use CachedImage which is Image replacement: 

<ffimageloading:CachedImage Source="{Binding ImageUrl}">
    <ffimageloading:CachedImage.Transformations>
        <!-- First two digits from HexColor = ALPHA channel -->
        <fftransformations:TintTransformation HexColor="#60ff0000" EnableSolidColor="true"/>
    </ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>

Disclaimer: I'm an author.

Upvotes: 7

Related Questions