当我使用TapGestureRecognizer和带有消息传递的ViewModel来发送命令时,如何添加按钮按下效果?

时间:2018-10-03 05:56:50

标签: xamarin xamarin.forms

我使用此模板来创建一个对我的应用程序可单击的按钮:

<?xml version="1.0" encoding="UTF-8"?>
<t:BaseButtonTemplate xmlns="http://xamarin.com/schemas/2014/forms" 
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                       xmlns:t="clr-namespace:Japanese.Templates" 
                       xmlns:local="clr-namespace:Japanese;assembly=Japanese" 
                       x:Class="Japanese.Templates.Btn2" x:Name="this">
    <StackLayout WidthRequest="50">
        <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding TapCommand, Source={x:Reference this}}" 
                                  CommandParameter="{Binding TapCommandParam, Source={x:Reference this}}" 
                                  NumberOfTapsRequired="1" />
        </StackLayout.GestureRecognizers>
        <Frame CornerRadius="25" BorderColor="{Binding FrameBorderColor, Source={x:Reference this}}" 
               BackgroundColor="{Binding FrameBackgroundColor, Source={x:Reference this}}" 
               HorizontalOptions="Center" VerticalOptions="Center" HasShadow="false" Padding="0"
               WidthRequest="50" HeightRequest="50">
                <Label TextColor="{Binding LabelTextColor, Source={x:Reference this}}"
                       Text="{Binding Text, Source={x:Reference this}}" 
                       HorizontalOptions="Center" VerticalOptions="Center" 
                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                       FontFamily="FontAwesome5ProSolid" />
        </Frame>
    </StackLayout>
</t:BaseButtonTemplate>

按钮的用法如下:

<t:Btn2 LabelTextColor="#EA4335" 
        Text="{Binding ABtnText }" 
        TapCommand="{Binding ABtnCmd }" Grid.Column="0" />

在我的ViewModel中,我有以下代码:

public partial class PhrasesFrameViewModel : BaseViewModel
{
    public ICommand ABtnCmd { get; }

    public PhrasesFrameViewModel()
    {
        ABtnCmd = new Command(() => MessagingCenter.Send<PhrasesFrameViewModel>(this, "ABtn"));
    }

    public static readonly BindableProperty TapCommandProperty =
       BindableProperty.Create(
            "TapCommand", typeof(Command), typeof(BaseButtonTemplate),
           defaultBindingMode: BindingMode.TwoWay,
           defaultValue: default(Command));

    public Command TapCommand
    {
        get { return (Command)GetValue(TapCommandProperty); }
        set { SetValue(TapCommandProperty, value); }
    }

    public static readonly BindableProperty TapCommandParamProperty = BindableProperty.Create(nameof(TapCommandParam), typeof(object), typeof(BaseButtonTemplate), default(object));

    public object TapCommandParam
    {
        get { return (object)GetValue(TapCommandParamProperty); }
        set { SetValue(TapCommandParamProperty, value); }
    }

    public static readonly BindableProperty FrameBackgroundColorProperty = 
        BindableProperty.Create( 
            nameof(FrameBackgroundColor), typeof(Color), typeof(BaseButtonTemplate), 
            Color.FromHex("FFFFFF"));

    public Color FrameBackgroundColor
    {
        get { return (Color)GetValue(FrameBackgroundColorProperty); }
        set { SetValue(FrameBackgroundColorProperty, value); }
    }

    public static readonly BindableProperty FrameBorderColorProperty =
        BindableProperty.Create(
            nameof(FrameBorderColor), typeof(Color), typeof(BaseButtonTemplate),
            Color.FromHex("EEEEEE"));

    public Color FrameBorderColor
    {
        get { return (Color)GetValue(FrameBorderColorProperty); }
        set { SetValue(FrameBorderColorProperty, value); }
    }

我订阅了这样的消息:

MessagingCenter.Subscribe<PhrasesFrameViewModel>(this, "ABtn", async (s) => await Btn((int)Settings.aBtn, 1));

我想做的就是单击按钮时产生某种效果。

有人对我该如何做有任何建议吗?请注意,这种效果可能是背景颜色的变化,也可能是任何会向用户指示按钮被按下的东西。

1 个答案:

答案 0 :(得分:1)

如果只想以xamarin形式(不包含本机渲染器)进行操作,则必须在自定义按钮中订阅触摸事件。在这些事件中,您可以执行例如小型动画或更改背景颜色。