Xamarin Forms 在图像单击时获取对象元素

Question

I have a problem. I created a CollectionView from a List called: List<Set> Sets and in a Set I have a List called List<Picture> Pictures .

Here is what the classes look like:

public class Set
{
    public int Id { get; set; }
    public List<Picture> Pictures{ get; set; }
}

And the picture class looks like this:

public class Picture
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Now in my XAML I added a click event on every image, because I need to know which image has been clicked. The problem is that I also need to know in which set the image click has been done, because an image can be in multiple sets.

Here is the XAML:

<CollectionView ItemsSource="{Binding Sets}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ScrollView Orientation="Horizontal">
                <StackLayout BindableLayout.ItemsSource="{Binding Pictures}" Orientation="Horizontal">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <ff:CachedImage Aspect="AspectFill" Source="{Binding imageSource}">
                                <ff:CachedImage.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="AlbumFoto_Clicked" />
                                </ff:CachedImage.GestureRecognizers>
                            </ff:CachedImage>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </ScrollView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Now I already got this code:

private void AlbumFoto_Clicked(object sender, EventArgs e)
{
    CachedImage image = (CachedImage)sender;
    var setPicture = image.Source.BindingContext as Picture;
    var ImageId = setPicture.Id;

    var Pictureindex = 0;
    foreach (var set in Sets.Where(set => Pictures.Picture.Any(p => p.Id == ImageId)))
    {
        Pictureindex = set.Pictures.Picture.FindIndex(p => p.Id == ImageId);
    }
}

Now how can I get the Id from the set of clicked image?

Answer 1

Instead of using an click event, you should use Command and CommandParameter and use the BindingContext of the parent Collection

<CollectionView ItemsSource="{Binding Sets}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ScrollView x:Name="ParentCollection" Orientation="Horizontal">
                <StackLayout BindableLayout.ItemsSource="{Binding Pictures}" Orientation="Horizontal">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <ff:CachedImage Aspect="AspectFill" Source="{Binding imageSource}">
                                <ff:CachedImage.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding ImageClickCommand}" CommandParameter="{Binding BindingContext.Id, Source={x:Reference Name=ParentCollection}}"/>
                                </ff:CachedImage.GestureRecognizers>
                             </ff:CachedImage>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </ScrollView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

And in your ViewModel:

public Command<int> ImageClickCommand{ get; set; }

And in your ViewModel Constructor:

ImageClickCommand = new Command<int>((Id) =>
{
    //Id -> id of the image
});

But if you still want to use the Clicked Event, i would sugest you do this change.

Add a new property to your Picture Class:

public class Picture
{
    public int Id { get; set; }
    public int SetId { get; set; }
    public string Name { get; set; }
}

Assuming that you receive that Collection from a Service, you could iterate over it and set your SetId like this:

foreach (var item in Collection)
{
    foreach (var picture in item.Pictures)
    {
         picture.SetId = item.Id   
    }         
}

Now in your Clicked you should have access to both Picture Id and the respetive Set Id:

private void AlbumFoto_Clicked(object sender, EventArgs e)
{
    CachedImage image = (CachedImage)sender;
    var setPicture = image.Source.BindingContext as Picture;
    var ImageId = setPicture.Id;
    var SetId = setPicture.SetId;
    //...
}