Search code examples
c#xamarinxamarin.formstouchbehavior

How to handle touch event for a FlexLayout in Xamarin


So Im building an app where I should show multiple products, since I want to show more than just one product in one row, i couldn't use a ListView, so I thought about using a FlexLayout as a Bindable-Layout and use the ItemsSource to display my list of products, whiche was a sucess. So I wanted to add a touch event to each of my products shown in the flexlayout, to do so I created a new Behaviour, this is the link for the code I used :

https://gist.github.com/jtaubensee/96a5e49c66a205e36ff32787f1d2114d

that did work and therefor I can use a Command. my problem is that I want to get the product that was clicked, and I can't figure out how to do ? is there anyone who can possibly help me with that ?


Solution

  • If you are not adverse to xaml, this is how I handle it.

    <FlexLayout BindableLayout.ItemsSource="{Binding Abilities}" IsVisible="{Binding HasAbilities}" BindableLayout.ItemTemplate="{DataTemplate attitm:AttachedAbility}"
                        AlignItems="Center" Wrap="Wrap" JustifyContent="Center"/>
    

    and the template implements the touch gesture, and passes the object as the Command Parameter;

    <ContentView.Content>
        <StackLayout Padding="20,8" HorizontalOptions="Center">
            <Frame BorderColor="{OnPlatform Android=DarkCyan, UWP=Accent}" Padding="4">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding DrillIntoCommand}" CommandParameter="{Binding}"/>
                </Frame.GestureRecognizers>
                <StackLayout HorizontalOptions="Center" Orientation="Horizontal">
                    <Label x:Name="TitleLabel" Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Text="&#xf12a;" FontFamily="{StaticResource FontAwesomeSolid}" IsVisible="{Binding IsUserCreated}" TextColor="Orange" HorizontalOptions="Center"/>
                </StackLayout>
            </Frame>
        </StackLayout>
    </ContentView.Content>