如何在 Xamarin Forms 的 Flex Button 控件模板中处理“单击”事件？

Question

我正在尝试为 Flex Button -NuGet Available here- 创建一个自定义控件模板，以使该按钮具有特定的格式。问题是当我为按钮创建任何模板时，所有事件都不会响应处理程序，例如，单击事件永远不会触发，除非我使用与整个模板设计相混淆的 contentpresenter。

那么有什么方法可以在不使用内容演示器的情况下重新附加点击 - 最好是所有其他点击事件？

到目前为止，这是我的模板代码：

<Style TargetType="flex:FlexButton" x:Key="IconTextButton">
        <Setter Property="ControlTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <Grid BackgroundColor="{TemplateBinding Path=BackgroundColor}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="1"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>

                        <Label Grid.Column="0" FontSize="Title" HorizontalOptions="Center" TextColor="{TemplateBinding Path=ForegroundColor}" Text="{TemplateBinding Path=Icon}">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android">FontAwesome5Solid.otf#Font Awsome 5 Free Solid</On>
                                    <On Platform="iOS">Font Awsome 5 Free</On>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>

                        <Label Grid.Column="1" FontSize="Subtitle" FontAttributes="Bold" TextColor="{TemplateBinding Path=ForegroundColor}" Text="│"/>

                        <Label Grid.Column="3" FontSize="Subtitle" FontAttributes="Bold" TextColor="{TemplateBinding Path=ForegroundColor}" Text="{TemplateBinding Path=Text}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这是一个实现示例：

<flex:FlexButton Icon="&#xf002;" Text="Explore" Style="{StaticResource IconTextButton}" Clicked="SampleButton_Clicked"/>

尽管一切看起来都很好，但 SampleButton_Clicked 永远不会被执行。

提前致谢。

Answer 1

我无法完全复制你的风格，当你显示flex:FlexButton 时你能看到探索文本吗？

我做了一个测试，当我删除你的style，Clicked 或TouchedUp 事件可以在Explore文本上正常执行。

根据我的研究，你的风格像是覆盖flex:FlexButton的图片，我看不到Explore text，所以我无法点击它。

但是当我为flex:FlexButton 添加TapGestureRecognizer 时，它正常工作。这是我的后台代码。

  var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += async (s, e) =>
            {
                await DisplayAlert("user", DateTime.Now.Year.ToString(),"Ok");
            };

  flexbtn.GestureRecognizers.Add(tapGestureRecognizer);

这是布局代码。

<flex:FlexButton Icon="&#xf002;" x:Name="flexbtn" Text="Explore" Style="{StaticResource IconTextButton}"  TouchedUp="FlexButton_Clicked" Clicked="FlexButton_Clicked"  />

这是我正在运行的GIF（我无法完全复制你的风格，我尽力复制它，但看起来仍然不好看）。