如何在 xamarin 表单的集合视图中的最后一项旁边添加图像/按钮？
Posted
技术标签:
【中文标题】如何在 xamarin 表单的集合视图中的最后一项旁边添加图像/按钮？【英文标题】：how add image/button next to last item in collection view in xamarin forms? 【发布时间】：2020-08-05 17:06:40 【问题描述】：我需要您的帮助我正在尝试在 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;
输出
【问题讨论】：
只需将上传图片设为您的 ItemsSource 中的最后一项 @Jason 我试过了，但最后没有显示，我也尝试订购列表，但每次上传图片都在第二个数字。我不知道为什么。 请贴出相关代码 @Jason 我更新了我的问题，请再次检查 首先，OrderByDescending 是一个返回有序列表的函数。不确定这是否是您的实际问题 - 但应该很容易检查您的数据并验证列表中的最后一项是否是您认为的。
【参考方案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;
截图：
【讨论】：
【参考方案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.
【讨论】：
以上是关于如何在 xamarin 表单的集合视图中的最后一项旁边添加图像/按钮？的主要内容，如果未能解决你的问题，请参考以下文章
集合视图。屏幕上的 const 图像数量。 Xamarin 表单
ListView 项目在 Xamarin 表单中不展开折叠高度