locked
FlexLayout and BindableLayout events RRS feed

  • Question

  • User245203 posted

    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>
    
    Sunday, March 17, 2019 4:37 PM

All replies

  • User382871 posted

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

    Monday, March 18, 2019 9:47 AM
  • User245203 posted

    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.

    Monday, March 18, 2019 10:11 AM
  • User382871 posted

    You can add 'GestureRecognizers' to StackLayout. <StackLayout> <StackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="" NumberOfTapsRequired="1"/> </StackLayout.GestureRecognizers> ... </StackLayout>

    Tuesday, March 19, 2019 2:10 AM