Forum› Xamarin.Forms

FlexLayout and BindableLayout events

shaunpryszlakshaunpryszlak USMember ✭✭✭
in Xamarin.Forms

I'm trying to do a "photos" type screen, with a grid of pictures. After much googling I ended up using a BindableLayout with a FlexLayout. This is perfect and gives me a wrapping grid of images based on the ItemSource. I con't see however, how you click on it and do something. Where do I bind my events or commands? It is not read only is it?

The XAML below shows the FlexLayout which contains a repeating Label/Image template. I could possibly get an id from the original file name for the image, but that seems a bit long winded. Any suggestions?

        <FlexLayout BindableLayout.ItemsSource="{Binding Comics}" Wrap="Wrap" Direction="Row" JustifyContent="SpaceAround" AlignItems="Center" AlignContent="Start">
            <BindableLayout.ItemTemplate>
                <DataTemplate >
                    <StackLayout Orientation="Vertical">
                        <Label Text="{Binding Name}" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" />
                        <Image Source="{Binding ImageSource}" Aspect="AspectFill" WidthRequest="200" HeightRequest="200" HorizontalOptions="Start">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped" NumberOfTapsRequired="1" />
                            </Image.GestureRecognizers>
                        </Image>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
Tagged:

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    You can add 'GestureRecognizers' to bind your event. However, it exists in your code. So what's your issue? Simplify the code?

  • shaunpryszlakshaunpryszlak USMember ✭✭✭

    My question is, I can't see a way to bind a command to the Item as you would with a ListView.

    Adding a GestureRecognizer works but I would have to add it to ALL the things i display for my item. I can add my Items Id to the image (hiding it in the ClassId) but then I have to look it up. This all adds more steps to getting it working.

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited March 2019

    You can add 'GestureRecognizers' to StackLayout.

        <StackLayout>
        <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Tapped="" NumberOfTapsRequired="1"/>
        </StackLayout.GestureRecognizers>
    ...
    </StackLayout>
Sign In or Register to comment.