Xamarin可重用的XAML用户控件和自定义命令

Question

首先，抱歉我的英语不好。 我正在使用Xamarin.Form开发iOS和Android项目。

我想要一个可重复使用的“xaml用户控件”，并且我需要使用ICommand使其可点击。

这是StackLayoutButton组件：

<?xml version="1.0" encoding="utf-8" ?>
 <StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Installa.Controls.StackLayoutButton">
  <Image x:Name="Icon" Source="{Binding Icon}" />
  <Label x:Name="Text" Text="{Binding Title}" HorizontalOptions="Center" LineBreakMode="NoWrap" Font="Small" TextColor="Red" />
</StackLayout>

这是 CalendarioPage xaml 页面，组件被使用在该页面上。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Installa.Controls;assembly=Installa"
             x:Class="Installa.CalendarioPage">

  <StackLayout>
    <Label Text="{Binding ViewName}" Font="42" IsVisible="{Binding IsWindowsPhone}" />
    <ActivityIndicator IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}" Color="Red" />

    <controls:StackLayoutButton BindingContext="{Binding Blog}" TextColor="Blue" /> <!-- Command="{Binding SubmitCommand}" --> 
    <controls:StackLayoutButton BindingContext="{Binding Facebook}" TextColor="Red" /> <!-- Command="{Binding SubmitCommand}" --> 
  </StackLayout>

</ContentPage>

这是CalendarioPage的C#页面：

public partial class CalendarioPage : ContentPage
{
    private CalendarioViewModel vm;

    public CalendarioPage()
    {
        InitializeComponent();

        vm = new CalendarioViewModel();

        this.BindingContext = vm;
    }
 }

这是ViewModel类：

namespace Installa
{
    public class CalendarioViewModel: BaseViewModel
    {

        public CalendarioViewModel()
        {
            blog = new Activity();
            blog.Link = "www.google.it";
            blog.Title = "Titolo del blog";
            blog.Icon = "logomenu.png";

            facebook = new Activity();
            facebook.Title = "Tito Fbook";
            facebook.Link = "www.facebook.it";
            facebook.Icon = "icon.png";

            ViewName = "nome della view";
            IsLoading = false;    
        }

        Activity blog = null;
        public Activity Blog
        {
            get {return blog;}
        }

        Activity facebook = null;
        public Activity Facebook
        {
            get { return facebook; }
        }

        string viewName = string.Empty;
        public string ViewName
        {
            get { return viewName; }
            set { SetProperty(ref viewName, value); }
        }

        public bool IsWindowsPhone
        {
            get
            {
                return Device.OS == TargetPlatform.WinPhone;
            }
        }

        bool isLoading = false;
        public bool IsLoading
        {
            get { return isLoading; }
            set { SetProperty(ref isLoading, value); }
        }           
    }
}

使用Activity这个简单的类：

    public string Title { get; set; }

    public string Link { get; set; }

    public String Icon { get; set; }

到目前为止，所有的东西都正常工作，但现在我需要实现ICommand接口。

在StackLayoutButton的c#代码中，我尝试添加：

        var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, "TapCommand");
        Icon.GestureRecognizers.Add(tapGestureRecognizer)
        Text.GestureRecognizers.Add(tapGestureRecognizer)

此外，我尝试将INotifyPropertyChanged和'OnTapped'方法添加到CalendarioViewModel中。

在Activity.cs中，我添加了'ICommand tapCommand'和相关的get...但是它没有起作用。

我尝试了其他方法，但是我无法启用StackLayoutButton组件上的点击。

我应该如何做呢？例如，我想要一个可编程的命令...例如，我想要浏览'Activity'的链接属性或能够打开新视图。

谢谢帮助！

更新：

我已经成功将TapGestureRecognizer添加到xaml用户控件(StackLayoutButton.xaml.cs)中，但我想以MVVM方式实现它。

using Xamarin.Forms;
namespace Installa.Controls
{
    public partial class StackLayoutButton : StackLayout
    {
        public StackLayoutButton()
        {
            InitializeComponent();


            TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer
            {
                Command = new Command(OnMyComponentTapped),
                CommandParameter = "ciao"
            };
            this.Icon.GestureRecognizers.Add(tapGestureRecognizer);
            this.Text.GestureRecognizers.Add(tapGestureRecognizer);
        }


        async void OnMyComponentTapped(object parameter)
        {
            // do action
        }


        public Color TextColor
        {
            get { return this.Text.TextColor; }
            set { this.Text.TextColor = value; }
        }
        public Label TextControl
        {
            get { return this.Text; }
            set { this.Text = value; }
        }
    }
}

有人能给我提供建议吗？

谢谢

- Matteo

Answer 1

这是我在 XAML 视图上添加手势识别器的方法：

<Label.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding SelectEquipmentCommand}"/>
</Label.GestureRecognizers>

这是我的ViewModel中的ICommand属性：

    public ICommand SelectEquipmentCommand
    {
        get
        {
            return fSelectEquipmentCommand ?? (fSelectEquipmentCommand = new Command(async () => await SelectEquipmentTask()));
        }
    }

    private async Task SelectEquipmentTask()
    {

    }

- Marlon Ribeiro