如何在 xamarin 表单的集合视图中的最后一项旁边添加图像/按钮？

Question

我需要您的帮助我正在尝试在 xamarin 表单中制作以下 UI。我想要列表末尾的上传按钮或图像。我尝试将集合视图与网格项目布局一起使用。我可以显示这样的图像，但我无法在末尾添加上传图像，如下所示。我试图将上传图像/按钮放在集合视图的页脚中，但它出现在列表底部，而不是在最后一张图像的旁边。那么有没有任何机构可以帮助我或指导我实现这一目标？ Sample UI

    <CollectionView x:Name="imgcollection" Margin="5" 
                                            BackgroundColor="Transparent" MinimumHeightRequest="15" HeightRequest="150"
                                            ItemsSource="{Binding ItemImages}"
                       >
                            <CollectionView.ItemsLayout>
                                    <GridItemsLayout Orientation="Vertical"
                                     Span="{OnIdiom Tablet='6',Phone='4'}" HorizontalItemSpacing="1"
                                                 VerticalItemSpacing="2" >

                                    </GridItemsLayout>

                                </CollectionView.ItemsLayout>

                                <CollectionView.EmptyView>
                                    <StackLayout >
                                        <Image Source="picturemessage_2.png"  Aspect="AspectFill"
                                              HeightRequest="150" WidthRequest="150" HorizontalOptions="Start">

                                        </Image>
                                    </StackLayout>
                                </CollectionView.EmptyView>

                            <CollectionView.ItemTemplate>

                                    <DataTemplate>
                                        <ContentView Padding="5" Margin="30" HeightRequest="100" WidthRequest="150">

                                        <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                                                <Image x:Name="imgview" Source="{Binding .}" HorizontalOptions="FillAndExpand"
                                                            VerticalOptions="FillAndExpand" Aspect="AspectFill"
                                                       AbsoluteLayout.LayoutBounds="0,0,1,1"
                                                       AbsoluteLayout.LayoutFlags="All"/>
                                                <Image Source="moreoptionbtn.png" Aspect="AspectFill" IsVisible="{OnIdiom Tablet='True',Phone='False'}"
                                                       AbsoluteLayout.LayoutBounds="1,0.1,30,30" 
                                                       AbsoluteLayout.LayoutFlags="PositionProportional"/>


                                            </AbsoluteLayout>

</ContentView>
                                    </DataTemplate>
                            </CollectionView.ItemTemplate>


                            </CollectionView>

C#

    private List<ImageSource> itemImages;
            public List<ImageSource> ItemImages
            {
                get { return itemImages; }
                set { itemImages = value;
                    OnPropertyChanged("ItemImages");
                }
            }
 public ImageSource defultImage { get; set; } = "picturemessage_2.png";
            public bool Isadd { get; set; } = false;
           //
    void somefunction()
    {
         DetailPageViewModel.ItemImages.Add(picture);

                                DetailPageViewModel.ItemImages.OrderByDescending(s=>s);
                                var i = DetailPageViewModel.Isadd;
                                if (!i)
                                {
                                    DetailPageViewModel.ItemImages.Add(defultImage);
                                    DetailPageViewModel..Isadd = true;
                                }
    }

输出

Answer 1

根据你的描述，你想点击Collectionview Item图片来添加图片，但是让Upload图片总是停留在最后一个项目，对吗？

如果是，我做一个样本，你可以看看：

 <CollectionView ItemsSource="{Binding ItemImages}" SelectionMode="Single">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="4" />
            </CollectionView.ItemsLayout>
            <CollectionView.EmptyView>
                <StackLayout>
                    <Image
                        Aspect="AspectFill"
                        HeightRequest="150"
                        Source="image3.png"
                        WidthRequest="150" />
                </StackLayout>
            </CollectionView.EmptyView>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Image Margin="5" Source="{Binding .}">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                            </Image.GestureRecognizers>
                        </Image>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

为Image控件添加GestureRecognizers，然后检测最后一个item的图片是否被点击。

 public partial class Page6 : ContentPage
{
    public ObservableCollection<ImageSource> ItemImages { get; set; }
    public Page6()
    {
        InitializeComponent();

        ItemImages = new ObservableCollection<ImageSource>()
        {
            "a5.jpg","a6.jpg","a7.jpg","a8.jpg","a9.jpg","upload2.jpg"
        };

        this.BindingContext = this;
    }

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
       Image image = (Image)sender;                
        if (getimagesource(image.Source)!=null && getimagesource(image.Source) == "upload2.jpg")
        {
            int count = ItemImages.Count;
            ItemImages.Insert(count - 1, "a11.jpg");
        }
    }

    private string getimagesource(ImageSource img)
    {
        string path;
        if (img is Xamarin.Forms.FileImageSource)
        {
            Xamarin.Forms.FileImageSource objFileImageSource = (Xamarin.Forms.FileImageSource)img;
            //
            // Access the file that was specified:-
            path = objFileImageSource.File;
            return path;

        }
        return null;
    }


}

截图：

Answer 2

您可以使用DataTemplateSelector 并将最后一项映射到上传图片或按钮

    public class MyTemplateSelector : DataTemplateSelector
    {
        public DataTemplate DefaultTemplate { get; set; }
        public DataTemplate UploadTemplate { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var currentItem = ((BindingItemType)item);


            var template = currentItem.Equals((container as CollectionView).ItemsSource.Cast<BindingItemType>().LastOrDefault()) ?  DefaultTemplate : UploadTemplate;
            return template;
        }
    }

 <ContentPage.Resources>
 <DataTemplate x:Name="default">
    <ContentView Padding="5" Margin="30" HeightRequest="100" WidthRequest="150">
        <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Image x:Name="imgview" Source="{Binding .}" HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand" Aspect="AspectFill"
                    AbsoluteLayout.LayoutBounds="0,0,1,1"
                    AbsoluteLayout.LayoutFlags="All"/>
            <Image Source="moreoptionbtn.png" Aspect="AspectFill" IsVisible="{OnIdiom Tablet='True',Phone='False'}"
                    AbsoluteLayout.LayoutBounds="1,0.1,30,30" 
                    AbsoluteLayout.LayoutFlags="PositionProportional"/>
        </AbsoluteLayout>
    </ContentView>
 </DataTemplate>
 <DataTemplate x:Name="uploadtemplate" >
    <Button Text="Upload" Clicked="UploadClicked"/>
 </DataTemplate>
 <local:MyTemplateSelector DefaultTemplate="{StaticResource default}" 
                           UploadTemplate="{StaticResource uploadtemplate}"
                           x:Name="templateselector" />
 </ContentPage.Resources>

 <CollectionView ItemsSource="{Binding ItemImages}" SelectionMode="Single" ItemTemplate="{StaticResource templateselector}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="4" />
            </CollectionView.ItemsLayout>
            <CollectionView.EmptyView>
                <StackLayout>
                    <Image
                        Aspect="AspectFill"
                        HeightRequest="150"
                        Source="image3.png"
                        WidthRequest="150" />
                </StackLayout>
            </CollectionView.EmptyView>
        </CollectionView>

private void UploadClicked(object sender, EventArgs args)
{

//handle image upload and update the ItemsSource count.
}