我正在尝试在xamarin.forms中创建一个有点复杂的列表。用户应该能够单击列表中的项目,并且该项目应扩展为更大的项目。现在,较大的项目应显示一些与此视图专门关联的其他UI组件。
我不知道该如何解决这个问题。它是关于具有动态大小的项目的列表视图。单击后,该项目将显示与该项目相关的其他视图。应该在Xamarin.ios和Xamarin.droid中完成此操作,还是建议您尝试在xamarin.forms中实现此目的?
我要贴一张图片,它不好,可能需要放大,但显示4个项目。第三个展开,因此您可以看到微调器和按钮。
一次只能扩展一个项目(我可能必须在ViewModel中进行处理),并且在按下另一个项目时,旧的项目应该被隐藏。
编辑:
感谢Rohit,我开始在Xamarin.Forms中实现解决方案,但是它仍然无法真正起作用,只是行扩展方式上的一些小问题。参见下图。为了简单起见,我跳过了微调器,仅使用了一个按钮。展开的行与自身下方的行重叠。第一张图片是在单击之前,第二张是在单击名为“两个”的项目之后。
视图
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="simpletest.PlayGroundPage">
<ContentPage.Content>
<StackLayout>
<ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AllItems}" SelectedItem="{Binding MySelectedItem}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="{Binding MyText}" />
<Image Source="{Binding MyImage}" />
</StackLayout>
<Button Text="button1" IsVisible="{Binding IsExtraControlsVisible}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
项目
public class Item : INotifyPropertyChanged
{
public Item(string text, string image, int id)
{
_myText = text;
_myImage = image;
_id = id;
_isExtraControlsVisible = false;
}
private string _myText;
private string _myImage;
private bool _isExtraControlsVisible;
private int _id;
public event PropertyChangedEventHandler PropertyChanged;
public int Id { get { return _id; } set { _id = value; } }
public string MyText
{
get { return _myText; }
set { _myText = value; OnPropertyChanged("MyText"); }
}
public string MyImage
{
get { return _myImage; }
set { _myImage = value; OnPropertyChanged("MyImage"); }
}
public bool IsExtraControlsVisible
{
get { return _isExtraControlsVisible; }
set { _isExtraControlsVisible = value; OnPropertyChanged("IsExtraControlsVisible"); }
}
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
ViewModel:
class PlayGroundViewModel : INotifyPropertyChanged
{
private Item _mySelectedItem;
public PlayGroundViewModel(ObservableCollection<Item> allItems)
{
AllItems = allItems;
_mySelectedItem = allItems.First();
}
public ObservableCollection<Item> AllItems { get; set; }
public Item MySelectedItem
{
get { return _mySelectedItem; } //Added a field for this one, mainly for debugging.
set
{
foreach (Item x in AllItems) //Changed to non-linq since it is not a list.
{
x.IsExtraControlsVisible = false;
}
if (value != null)
{
foreach (Item x in AllItems)
{
if (x.Id.Equals(value.Id))
{
x.IsExtraControlsVisible = true;
_mySelectedItem = x;
}
}
}
SetChangedProperty("MySelectedItem");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void SetChangedProperty(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
代码背后:
public partial class PlayGroundPage : ContentPage
{
public PlayGroundPage()
{
InitializeComponent();
ObservableCollection<Item> items = new ObservableCollection<Item>();
items.Add(new Item("One", "", 0));
items.Add(new Item("Two", "", 1));
items.Add(new Item("Three", "", 2));
PlayGroundViewModel weekViewModel = new PlayGroundViewModel(items);
BindingContext = weekViewModel;
}
}
您可以使用XAML,ViewModel,ObservableCollection以以下方式实现它。
XAML:
<ListView VerticalOption="FillAndExpand" HasUnevenRows="True"
ItemsSource="{Binding AllItems}" SelectedItem="{Binding MySelectedItem}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="{Binding MyText}" />
<Image Source="{Binding MyImage}" />
</StackLayout>
<Button Text="button" IsVisible="{Binding IsExtraControlsVisible}" />
<Spinner IsVisible="{Binding IsExtraControlsVisible}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ViewModel:
public ObservableCollection<Item> AllItems
{
get { return _allItems; }
set
{
_allItems = value;
OnPropertyChanged();
}
}
public Item MySelectedItem
{
get { return _mySelectedItem; }
set
{
_mySelectedItem = value;
OnPropertyChanged();
foreach (var item in AllItems)
{
item.IsExtraControlsVisible = false;
}
var selectedItem = AllItems.FirstOrDefault(x => x.Equals(value));
if (selectedItem != null)
{
selectedItem.IsExtraControlsVisible = true;
}
}
}
Item.cs:
public class Item : INotifyPropertyChanged
{
private string _myText;
private string _myImage;
private bool _isExtraControlsVisible;
private int _id;
public int Id { get; set; }
public string MyText
{
get{ return _myText; }
set
{ _myText = value;
OnPropertyChanged();
}
}
public string MyImage
{
get{ return _myImage; }
set
{
_myImage = value;
OnPropertyChanged();
}
}
public bool IsExtraControlsVisible
{
get{ return _isExtraControlsVisible; }
set
{
_isExtraControlsVisible = value;
OnPropertyChanged();
}
}
}
请在此处找到演示-XamarinForms_Dynamic_ListView_Item。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句