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

这是 View 模型类:

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 接口(interface)。

在 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 的“链接属性”或能够打开一个新 View 。

感谢您的帮助!

更新:

我能够将 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; }
        }
    }
}

谁能告诉我方法？

谢谢

Answer 1

这就是我在 xaml View 中添加手势识别器的方式:

<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()
    {

    }