Xamarin表单中的图像点击事件

Question

分类主页

类别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 Controller并检索具有该类别的所有数据库条目。 我的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);
    } 

Answer 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);

Answer 2

我建议您重组XAML代码设计。 查看您的代码段，发布的屏幕截图，以及从对CGPA6.4的答案的评论，您可以通过创建自定义视图并将信息绑定到该视图来简化您的工作。 例如，下面的代码：

<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并使用Binding将图像文件，文本和点击处理程序附加到视图，将进一步简化您的XAML和代码结构！