如何处理 Xamarin Forms 中 Flex Button 控件模板中的 'Clicked' 事件？

Question

我正在尝试为 Flex 按钮创建自定义控件模板 -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（我无法完全复制你的风格，我尽力复制了，但似乎还是不好看）。

如何处理 Xamarin Forms 中 Flex Button 控件模板中的 'Clicked' 事件？

How to handle 'Clicked' event in Flex Button control template in Xamarin Forms?

c#

xaml

controltemplate

xamarin.forms