Xamarin Forms 투명 단추 숨기기 이미지

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

은 - 당신이 TapGestureRecognizer를 사용하는 Grid을 연장 할 수 있습니다 (전 C#에서 이것을 구현 한,하지만 당신은 너무 XAML에서 동일 할 수있다).

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>