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

这是视图模型类：

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

谁能给我建议？

谢谢

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

    }