Xamarinフォームの透明ボタンは画像を非表示にします

Question

画像とボタンを含むフレームを持っていますが、ボタンの背景色が透明に設定されているにもかかわらず、その画像が隠れています。そう。ボタンを削除すると、画像がきれいに見えるようになります。

<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

必要であれば、単純に二つの画像を切り替える - あなたは（私はC＃でこれを実装しているが、あなたはあまりにもXAMLで同じことを行うことができます）TapGestureRecognizerを使用するGridを拡張することができます。

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

使用例：

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