我需要您的帮助,我正在尝试以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;
}
}
答案 0 :(得分:0)
根据您的描述,您想单击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>
添加用于图像控制的GestureRecognizers,然后检测是否单击了最后一个图像。
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;
}
}
屏幕截图:
答案 1 :(得分:0)
您可以使用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.
}