CODEWITHSUNDEEP
xamarin.forms
Morten J Petersen
Morten J Petersen

Reputation: 233

Xamarin Forms transparent button hides image

I have a Frame containing an Image and a Button but even though the background colour for the button is set to transparent it still hides the image behind it and I've been unable to figure why this is so. Removing the button makes the image appear just fine.

    <Grid x:Name="SettingsGrid" Grid.Row="1"  Grid.Column="1" BackgroundColor="Transparent" Grid.RowSpan="2">
        <Frame x:Name="SettingsFrame" CornerRadius="42" HasShadow="false" BackgroundColor="#aa2129" Padding="0">
            <Image Source="whitecog.PNG" HorizontalOptions="Center" VerticalOptions="Center" Scale="1"/>
            <Button x:Name="SettingsButton" Clicked="OnSettingsClick"
                    HorizontalOptions="Center" VerticalOptions="Center"
                    BorderWidth="1"  BorderColor="Transparent" BackgroundColor="Transparent" BorderRadius="0"/>
        </Frame>
    </Grid>

Upvotes: 0

Views: 4218

Answers (1)

Sharada
Sharada

Reputation: 13601

If you need to simply toggle between two images - you can extend Grid to use TapGestureRecognizer (I have implemented this in C#, but you can do the same in XAML too). 

public class ToggleImage : Grid
{
    public static readonly BindableProperty ToggledSourceProperty = BindableProperty.Create("ToggledSource", typeof(ImageSource), typeof(Image), default(ImageSource), propertyChanged: OnValueChanged);
    public static readonly BindableProperty OriginalSourceProperty = BindableProperty.Create("OriginalSource", typeof(ImageSource), typeof(Image), default(ImageSource), propertyChanged: OnValueChanged);
    public static readonly BindableProperty IsToggledProperty = BindableProperty.Create("IsToggled", typeof(bool), typeof(Image), false, defaultBindingMode: BindingMode.TwoWay, propertyChanged: OnValueChanged);

    private Image _originalImage;
    private Image _toggledImage;

    public ToggleImage()
    {
        var tapRecognizer = new TapGestureRecognizer();
        tapRecognizer.Command = new Command(() => IsToggled = !IsToggled);
        GestureRecognizers.Add(tapRecognizer);

        _originalImage = new Image { Aspect = Aspect.AspectFit };
        _toggledImage = new Image { Aspect = Aspect.AspectFit };

        Children.Add(_originalImage);
        Children.Add(_toggledImage);
    }

    static void OnValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var ctrl = bindable as ToggleImage;
        if (ctrl == null)
            return;

        ctrl.OnValueChanged();
    }

    void OnValueChanged()
    {
        _originalImage.Source = OrginalSource;
        _toggledImage.Source = ToggledSource;

        _toggledImage.IsVisible = IsToggled;
        _originalImage.IsVisible = !IsToggled;
    }

    public bool IsToggled
    {
        get { return (bool)GetValue(IsToggledProperty); }
        set { SetValue(IsToggledProperty, value); }
    }

    public ImageSource ToggledSource
    {
        get { return (ImageSource)GetValue(ToggledSourceProperty); }
        set { SetValue(ToggledSourceProperty, value); }
    }

    public ImageSource OrginalSource
    {
        get { return (ImageSource)GetValue(OriginalSourceProperty); }
        set { SetValue(OriginalSourceProperty, value); }
    }
}

Sample usage:

<Grid x:Name="SettingsGrid" Grid.Row="1"  Grid.Column="1" BackgroundColor="Transparent" Grid.RowSpan="2">
  <Frame x:Name="SettingsFrame" CornerRadius="42" HasShadow="false" BackgroundColor="#aa2129" Padding="0">
      <local:ToggleImage IsToggled="{Binding IsToggled}" OriginalSource="image1.png" ToggledSource="image2.png" HorizontalOptions="Center" VerticalOptions="Center" Scale="1"/>
  </Frame>
</Grid>

Upvotes: 2

Related Questions