Xamarin 表单中的图像单击事件答案

【问题标题】：Image click event in Xamarin formsXamarin 表单中的图像单击事件
【发布时间】：2018-11-26 12:27:32
【问题描述】：

类别 XAML 代码段 -->

                        <StackLayout Grid.Column ="1" Grid.Row ="0"  Orientation ="Vertical" BackgroundColor ="White" Padding ="10" HorizontalOptions ="FillAndExpand">
                            <Image Source ="banking.png" HorizontalOptions ="CenterAndExpand "/>
                            <Label Text ="Finance" FontSize ="Small " HorizontalOptions ="FillAndExpand" HorizontalTextAlignment ="Center"/>
                        </StackLayout>

                        <StackLayout Grid.Column ="2" Grid.Row ="0"  Orientation ="Vertical" BackgroundColor ="White" Padding ="10" HorizontalOptions ="FillAndExpand">
                            <Image Source ="legal.png" HorizontalOptions ="CenterAndExpand "/>
                            <Label Text ="Legal" FontSize ="Small " HorizontalOptions ="FillAndExpand" HorizontalTextAlignment ="Center"/>
                        </StackLayout>

请帮忙。我需要的是能够将一个名为“CategoryName”的变量传递给我的 SearchAPI 控制器并检索具有该类别的所有数据库条目。我的 SearchAPIController 如下所示

  [Route("api/Oppotunities/Search/{keyword}")]
    [ResponseType(typeof(List<Oppotunity>))]
    public async Task<IHttpActionResult> GetOppotunitiesByKeyword(string keyword)
    {
        List<Oppotunity> oppotunities = db.Oppotunities
            .Where(oppotunity => oppotunity.Title.Contains(keyword)
                                 || oppotunity.Description.Contains(keyword)
                                 || oppotunity.Category.Contains(keyword)
                                 || oppotunity.Organisation.Contains(keyword)).ToList();
        if (oppotunities == null)
        {
            return NotFound();
        }

        return Ok(oppotunities);
    }

【问题讨论】：

您可以使用button 代替Image。 Button 定义了当用户用手指或鼠标指针点击 Button 时触发的 Clicked 事件。此外，一个按钮显示文本和图像。

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

Xamarin 表单中的图像点击事件

您需要在 xaml 中为您的 Image 控件命名

<Image Source ="banking.png" x:Name="imageFinance" HorizontalOptions ="CenterAndExpand "/>

然后，在同一文件后面的代码中，创建 TapGestureRecognizer 并添加到该 Image

var tapFinance = new TapGestureRecognizer();
tapFinance.Tapped += async (s, e) =>
{
 //your code
};
imageFinance.GestureRecognizers.Add(tapFinance);

【讨论】：

我在那个 xaml 文件中有 21 个图像，所以我需要知道用户选择的特定图像。你能澄清一下我如何使用tapGestureRecogniser
以上，如果你看到我为imgFinance 创建了TapGestureRecognizer 并将tapFinance 添加到imageFinance。像这样你可以为别人做。

【解决方案2】：

我建议您重构您的 XAML 代码设计。查看您的 sn-p、您发布的屏幕截图以及您对 CGPA6.4 答案的评论，您可以通过创建 custom view 并将信息绑定到它来简化您的工作。比如下面这段代码：

<StackLayout 
    Grid.Column="2" 
    Grid.Row="0"  
    Orientation="Vertical" 
    BackgroundColor="White" 
    Padding="10" 
    HorizontalOptions="FillAndExpand">
    <Image 
        Source="legal.png" 
        HorizontalOptions="CenterAndExpand "/>
    <Label 
        Text="Legal" 
        FontSize="Small" 
        HorizontalOptions="FillAndExpand" 
        HorizontalTextAlignment="Center"/>
</StackLayout>

可以变成自定义控件，例如：

<MyCustomControl 
    Grid.Column="2" 
    Grid.Row="0" 
    ImageFile="legal.png"
    Text="Legal" />

这将使您的 XAML 简化很多。然后，您可以实现 Action 或 EventHandler 属性来处理点击特定视图时的处理，然后可以将您的自定义控件转换为：

<MyCustomControl 
    Grid.Column="2" 
    Grid.Row="0" 
    ImageFile="legal.png"
    Text="Legal" 
    OnControlTap="OnLegalViewTap"/>

因为看起来（从您的图像中）您将重复使用相同的视图，所以您应该考虑实现 FlexLayout 而不是 Grid 并使用 Bindings 附加图像文件、文本，然后点击视图处理程序，这将进一步简化您的 XAML 和代码结构！

【讨论】：