Xamarin Forms Clickable Images

Question

Первоначально я реализовал эту функцию, но просто добавил изображение к кнопке. Тогда я понял, что могу просто добавить жест нажатия к изображению (без использования кнопки). Любые рекомендации, которые лучше всего подходят и почему? Благодарю.

Answer 1

Это зависит от визуального эффекта, которого вы хотите достичь.

• Если вы используете Button, у вас будет задействованная анимация (зависит от платформы) и конкретная граница приклада. У вас гораздо меньше контроля, как будет выглядеть изображение (оно находится в левой части текста кнопки).
• Если вы используете равнину TapGestureRecognizer вы будете иметь нормальное изображение с полным контролем соотношения сторон/размера и т.д.

Answer 2

Я использую свое собственное «OnClick» событие для изображения :) с помощью пользовательского контроля:

public class MyImage : Xamarin.Forms.Image 
{ 
    public static BindableProperty OnClickProperty = 
     BindableProperty.Create("OnClick", typeof(Command), typeof(MyImage)); 

    public Command OnClick 
    { 
     get { return (Command)GetValue(OnClickProperty); } 
     set { SetValue(OnClickProperty, value); } 
    } 

    public MyImage() 
    { 
     GestureRecognizers.Add(new TapGestureRecognizer() {Command = new Command(DisTap)}); 
    } 

    private void DisTap(object sender) 
    { 
     if (OnClick != null) 
     { 
      OnClick.Execute(sender); 
     } 
    } 

} 

Затем используйте его с MVVM, как:

<local:MyImage Source="{Binding Img}" OnClick="{Binding ImgTapCommand}" /> 

Answer 3

Вы можете использовать абсолютное расположение, которое может быть использовано для размещения двух элементов друг над другими, не забудьте сделать переключат n - второй элемент.

<AbsoluteLayout> 
      <Image Source="clock.png" AbsoluteLayout.LayoutBounds="0.2,0.2,35,35" AbsoluteLayout.LayoutFlags="PositionProportional"/> 
      <Button AbsoluteLayout.LayoutBounds="0.2,0.2,35,35" AbsoluteLayout.LayoutFlags="PositionProportional" BorderColor="Transparent" BackgroundColor="Transparent" Command="{Binding AlertMeCommand}"/> 
</AbsoluteLayout>