使用 Bindable 属性将触摸事件侦听器添加到 Xamarin 自定义控件答案

【问题标题】：Add a touch-event listener to a Xamarin custom control using Bindable Property使用 Bindable 属性将触摸事件侦听器添加到 Xamarin 自定义控件
【发布时间】：2021-12-11 17:45:36
【问题描述】：

我开发了一个简单的两行自定义控件来托管名称-值对并使用可重用的逻辑显示它。我可以使用设置两个标签值的两个 BindableProperty 来设置两个属性和 XAML 之间的链接。

这是我的自定义控件 XAML：

<?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="SystemOne.ui.GenericItem"
    Orientation="Vertical">
    <Label x:Name="TitleLabel" />
    <Label x:Name="ContentLabel"/>
</StackLayout>

这是后面代码中的属性和相关的 BindableProperty 之一：

public string TextContent { get; set; }
public static readonly BindableProperty TextContentProperty = BindableProperty.Create(
    propertyName: "TextContent",
    returnType: typeof(string),
    declaringType: typeof(GenericItem),
    defaultValue: "",
    propertyChanged: TextContentPropertyChanged);
private static void TextContentPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        GenericItem GenericItem = (GenericItem)bindable;
        GenericItem.ContentLabel.Text = newValue.ToString();
    }

这允许以这种方式在任何页面中使用 GenericItem 自定义控件（定义适当的命名空间）：

<ui:GenericItem x:Name="MyGenItem" TextContent="{Binding MyViewModel.MyContentText}" />

GenericItem 自定义控件从为 TextContent 属性定义的绑定中获取其标签“ContentLabel”的值。

现在我想开发一些允许使用这个伪 XAML 的东西：

<ui:GenericItem x:Name="MyGenItem" TextContent="{Binding MyViewModel.MyContentText}" Clicked="{Binding MyViewModel.SomeProperty}"/>

甚至不绑定：

<ui:GenericItem x:Name="MyGenItem" TextContent="{Binding MyViewModel.MyContentText}" Clicked="MyGenericItem_Tapped"/>

其中“MyGenericItem_Tapped”是在页面的代码隐藏中定义的事件处理程序方法，用于创建 GeneriItem 控件的“MyGenItem”实例。

我找不到路！

【问题讨论】：

标签： xamarin custom-controls eventhandler bindableproperty

【解决方案1】：

我使用 ContentView 来制作如下自定义控件：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App17.GenericItem">
<ContentView.Content>
    <StackLayout Orientation="Vertical">
        <Label x:Name="TitleLabel"  />
        <Label x:Name="ContentLabel"  />
    </StackLayout>
</ContentView.Content>
 </ContentView>

然后直接使用GestureRecognizers代替使用Bindable属性的touch-event listener。

   <ui:GenericItem x:Name="MyGenItem" TextContent="{Binding MyContentText}">
            <ui:GenericItem.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </ui:GenericItem.GestureRecognizers>
        </ui:GenericItem>

如果你想使用GestureRecognizers的绑定，你可以使用ICommand。

Xaml：

  <ui:GenericItem x:Name="MyGenItem" TextContent="{Binding MyContentText}">
            <ui:GenericItem.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding TapGestureRecognizer_Command}"></TapGestureRecognizer> 
            </ui:GenericItem.GestureRecognizers>
        </ui:GenericItem>

后面的代码：

public partial class Page14 : ContentPage
{
    public Page14()
    {
        InitializeComponent();
        this.BindingContext = new MyViewModel();
    }       
}
public class MyViewModel
{
    public Command TapGestureRecognizer_Command { get; set; }
    public string MyContentText { get; set; }
    public MyViewModel()
    {
        MyContentText = "Hello";
        TapGestureRecognizer_Command = new Command(TappedCommand);
    }

    private void TappedCommand(object obj)
    {
        Console.WriteLine("TappedCommand");
    }
}

【讨论】：