Как добавить изображение / кнопку рядом с последним элементом в виде коллекции в формах xamarin?

Question

Мне нужна ваша помощь. Я пытаюсь создать следующий пользовательский интерфейс в формах xamarin. Мне нужна кнопка Загрузить или изображение в конце списка. Я пытался использовать представление коллекции с макетом элемента сетки. Я могу показывать изображения, подобные этому, но я не могу добавить изображение загрузки в конце, как показано ниже. я попытался поместить загружаемое изображение / кнопку в нижний колонтитул представления коллекции, но это появляется внизу списка, а не рядом с последним изображением. Так есть ли органы, которые могут мне помочь или помочь мне достичь этого? Образец пользовательского интерфейса

    <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

Вы можете использовать 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.
}

Answer 2

Согласно вашему описанию, вы хотите щелкнуть изображение элемента Collectionview, чтобы добавить изображение, но сделать так, чтобы изображение загрузки всегда оставалось на последнем элементе, я прав?

Если да, я делаю один пример, который Вы можете посмотреть:

 <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>

Добавление GestureRecognizer для управления изображением, а затем определить, был ли нажат последний объект изображения.

 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;
    }


}

Снимок экрана: