我正在尝试在xamarin.forms中创建一个有点复杂的列表。用户应该能够点击列表中的项目,它应该扩展到更大的东西。现在,较大的项目应显示一些与此视图特定关联的其他UI组件。
我想知道如何解决这个问题。这是一个包含动态大小项目的列表视图。点击后,该项目将显示与该项目相关的其他视图。这应该在Xamarin.ios和Xamarin.droid中完成,还是建议尝试在xamarin.forms中实现这一点?
我会张贴一张照片,它不太好,可能需要一些放大倍数,但它会显示4个项目。第三个是扩展的,因此你可以看到它上面的微调器和按钮。
一次只能扩展一个项目(我可能需要在ViewModel中处理它),并且在按下另一个项目时应该隐藏旧项目。
编辑:
感谢Rohit我开始在Xamarin.Forms中实现一个解决方案,但它仍然没有真正起作用,只是在扩展行的一些小问题。见下图。我正在跳过微调器,只是为了简单而使用一个按钮。展开的行与其下方的行重叠。第一张照片是在点击之前,第二张是在点击了名为“Two”的项目之后。
查看
<?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));
}
}
}
视图模型:
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;
}
}
答案 0 :(得分:1)
您可以使用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。