Agregar un escucha de eventos táctiles a un control personalizado de Xamarin utilizando una Propiedad Enlazable.

18 Jul, 2023 Programación 0

Desarrollé un control personalizado de dos líneas simple para alojar un par de Nombre-Valor y mostrarlo con lógica reutilizable.
Podría configurar la conexión entre las dos propiedades y el XAML utilizando dos BindableProperty que establecen el valor de las dos etiquetas.

Este es mi XAML para control personalizado:

<?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>
    <label x:name="ContentLabel"></label>
</stacklayout>

Esta es una de las propiedades y BindableProperty relacionada en el código subyacente:

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

Esto permite usar el control personalizado GenericItem en cualquier página de la siguiente manera (definiendo el espacio de nombres adecuado):

<ui:genericitem x:name="MyGenItem" textcontent="{Binding MyViewModel.MyContentText}"></ui:genericitem>

El control personalizado GenericItem toma el valor para su etiqueta ‘ContentLabel’ desde el enlace definido para la propiedad TextContent.

Ahora me gustaría desarrollar algo que permita un uso con este pseudo-XAML:

<ui:genericitem x:name="MyGenItem" textcontent="{Binding MyViewModel.MyContentText}" clicked="{Binding MyViewModel.SomeProperty}"></ui:genericitem>

o incluso no enlazado:

<ui:genericitem x:name="MyGenItem" textcontent="{Binding MyViewModel.MyContentText}" clicked="MyGenericItem_Tapped"></ui:genericitem>

donde ‘MyGenericItem_Tapped’ es un método controlador de evento definido en el código detrás de la página que crea la instancia de ‘MyGenItem’ del control GeneriItem.

¡No pude encontrar una forma!

// Definir nueva BindableProperty para el evento Clicked public static readonly BindableProperty ClickedProperty = BindableProperty.Create( propertyName: "Clicked", returnType: typeof(ICommand), declaringType: typeof(GenericItem), defaultValue: null); // Definir método controlador para el evento Clicked private void OnClicked() { ICommand command = (ICommand)GetValue(ClickedProperty); if (command != null && command.CanExecute(null)) { command.Execute(null); } }

<stacklayout xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="SystemOne.ui.GenericItem" orientation="Vertical"> <stacklayout.gesturerecognizers> <tapgesturerecognizer tapped="OnClicked"></tapgesturerecognizer> </stacklayout.gesturerecognizers> <label x:name="TitleLabel"></label> <label x:name="ContentLabel"></label> </stacklayout>

Answer

davy.ai

July 18, 2023 at 7:39 am
Como experto en IT especializado en xamarin, custom-controls, eventhandler y bindableproperty, hay una manera de lograr la funcionalidad deseada de agregar un evento clicked al control personalizado GenericItem.

Para agregar un evento clicked al control GenericItem, se debe crear una nueva BindableProperty en el code-behind del evento Clicked del control. La propiedad debe ser del tipo ICommand, que es una interfaz que representa un comando que puede ejecutarse. Una vez definida la BindableProperty, se debe crear un método controlador para el evento, que se puede llamar cuando se activa el evento. En este caso, el método controlador es el método “MyGenericItem_Tapped”.

Aquí tienes un ejemplo de cómo agregar un evento clicked al control GenericItem:
```
// Definir nueva BindableProperty para el evento Clicked
public static readonly BindableProperty ClickedProperty = BindableProperty.Create(
        propertyName: "Clicked",
        returnType: typeof(ICommand),
        declaringType: typeof(GenericItem),
        defaultValue: null);

// Definir método controlador para el evento Clicked
private void OnClicked()
{
    ICommand command = (ICommand)GetValue(ClickedProperty);
    if (command != null && command.CanExecute(null))
    {
        command.Execute(null);
    }
}
```
Una vez que se definen la BindableProperty y el método controlador, el XAML del control ahora puede incluir la nueva propiedad Clicked:
```
<ui:genericitem x:name="MyGenItem" textcontent="{Binding MyViewModel.MyContentText}" clicked="{Binding MyViewModel.MyCommand}"></ui:genericitem>
```
o
```
<ui:genericitem x:name="MyGenItem" textcontent="{Binding MyViewModel.MyContentText}" clicked="MyGenericItem_Tapped"></ui:genericitem>
```
Y dentro del XAML del control, se agrega un TapGestureRecognizer a todo el StackLayout que llama al método OnClicked:
```
<stacklayout xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="SystemOne.ui.GenericItem" orientation="Vertical">

    <stacklayout.gesturerecognizers>
        <tapgesturerecognizer tapped="OnClicked"></tapgesturerecognizer>
    </stacklayout.gesturerecognizers>

    <label x:name="TitleLabel"></label>
    <label x:name="ContentLabel"></label>
</stacklayout>
```
Con estos cambios, el control GenericItem ahora puede manejar el evento clicked y llamar al método controlador apropiado cuando se activa.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Agregar un escucha de eventos táctiles a un control personalizado de Xamarin utilizando una Propiedad Enlazable.

Answer

davy.ai