Image click event in Xamarin forms

Question

Categories MainPage

Categories XAML Snippet -->

                        <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>

Please help. What i need is to be able to pass a variable called "CategoryName" to my SearchAPI Controller and retrieve all database entries that have that category. My SearchAPIController is like below

  [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

Image click event in Xamarin forms

You need to give name to your Image control in xaml

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

Than, in code behind of the same file, create TapGestureRecognizer & add to that Image

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

Answer 2

I would recommend you restructure your XAML code design. Looking at your snippet, your posted screenshot, and from your comment to CGPA6.4 's answer, you could simplify your work by creating a custom view and bind the information to it. For example, this code below:

<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>

can be turned into a custom control like:

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

This will simplify your XAML by a lot . You could then implement an Action or EventHandler property to handle when a specific view is tapped, which could then turn your custom control to:

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

Because it appears that (from your image) you will be using the same view repeatedly, you should then look at implementing a FlexLayout instead of a Grid and use Binding s to attach the image file, text, and tap handler to the view, which will simplify your XAML and code structure even more!