Xamarin Forms transparente Schaltfläche blendet Bild

Question

Ich habe einen Frame mit einem Bild und einer Schaltfläche, aber obwohl die Hintergrundfarbe für die Schaltfläche auf transparent festgelegt ist, verbirgt es immer noch das Bild dahinter und ich konnte nicht herausfinden, warum dies ist damit. Wenn Sie die Taste entfernen, erscheint das Bild einwandfrei.

<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> 

Answer 1

Wenn Sie müssen einfach wechseln zwischen zwei Bildern - Sie Grid erweitern können TapGestureRecognizer zu verwenden (Ich habe dies in C# implementiert, aber Sie können das gleiche in XAML tun).

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); } 
    } 
} 

Verwendungsbeispiel:

<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>