我在一行中有一个自定义列表视图,其中有标签、条目标签、开关、按钮。在编辑时,我会得到以下效果,如下面的链接所示。我不知道如何用开关编辑行,如下面的电影所示。
https://drive.google.com/file/d/1U4Ggy36F9ft6nrM8iwXcrjrGISS0tP_M/view?usp=drive_link
`<ListView
x:Name="ExpiryProductsData"
SelectionMode="Single"
ItemSelected="ExpiryProductsData_ItemSelected"
SeparatorColor="LightGray"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Orientation="Horizontal"
VerticalOptions="Center">
<Label
Text="{Binding Description}"
TextColor="Black"
VerticalOptions="Center"
/>
<Label
Text="{Binding DateExpiry}"
TextColor="Black"
VerticalOptions="Center"
/>
<Label
Text="{Binding LeftToExpiry}"
TextColor="Black"
VerticalOptions="Center"
/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="EndAndExpand">
<Switch
x:Name="EditData"
Toggled="EditData_Toggled"
/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
`
我的看法型号:
`class ViewModel
{
public string LotNumber { get; set; }
public string Description { get; set; }
public string ExpiryDate { get; set; }
public string LeftToExpiry { get; set; }
}`
如何按照我在电影中展示的方式使用开关编辑数据
.您可以使用 MVVM 和
Switch.Behaviors
来实现这一点。
我根据你的代码,新建了一个demo并实现了这个功能,你可以参考以下步骤:
1.在 Item 模型中添加一个 bool 变量(假设其名称为
Item.cs
)并将其绑定到 Switch
。并为此实现接口 INotifyPropertyChanged
Item.cs
。
public class Item: INotifyPropertyChanged
{
public string LotNumber { get; set; }
public string Description { get; set; }
public string ExpiryDate { get; set; }
public string LeftToExpiry { get; set; }
private bool _isSwitched;
public bool IsSwitched
{
get { return _isSwitched; }
set
{
SetProperty(ref _isSwitched, value);
}
}
bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
{
if (Object.Equals(storage, value))
return false;
storage = value;
OnPropertyChanged(propertyName);
return true;
}
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
2.创建视图模型(
MyViewModel.cs
)
public class MyViewModel
{
public ObservableCollection<Item> Items { get; set; }
public Command ToggledCommand { get; set; }
public MyViewModel() {
Items = new ObservableCollection<Item>();
Items.Add(new Item { LotNumber = "01", Description="description_1", ExpiryDate="2024.8", LeftToExpiry ="23" });
Items.Add(new Item { LotNumber = "02", Description="description_2", ExpiryDate="2024.8", LeftToExpiry ="23" });
Items.Add(new Item { LotNumber = "03", Description="description_3", ExpiryDate="2024.8", LeftToExpiry ="23" });
ToggledCommand = new Command((s) => ExecuteToggledCommand(s as Item));
}
private void ExecuteToggledCommand(Item s)
{
if (s != null)
{
// add your code here
System.Diagnostics.Debug.WriteLine("---->"+ s.LotNumber );
}
}
}
3.使用示例:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:ListViewApp0207.ViewModels"
xmlns:behaviors="clr-namespace:ListViewApp0207.EventToCommandBehavior"
x:Class="ListViewApp0207.MainPage"
x:Name="myPage" >
<ContentPage.BindingContext>
<viewmodels:MyViewModel></viewmodels:MyViewModel>
</ContentPage.BindingContext>
<ListView ItemsSource="{Binding Items}"
x:Name="ExpiryProductsData"
SelectionMode="Single"
SeparatorColor="LightGray"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Orientation="Horizontal"
VerticalOptions="Center">
<Label
Text="{Binding Description}"
TextColor="Black"
VerticalOptions="Center"
/>
<Label
Text="{Binding DateExpiry}"
TextColor="Black"
VerticalOptions="Center"
/>
<Label
Text="{Binding LeftToExpiry}"
TextColor="Black"
VerticalOptions="Center"
/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="EndAndExpand">
<Switch
x:Name="EditData" IsToggled="{Binding IsSwitched}">
<Switch.Behaviors>
<behaviors:EventToCommandBehavior
EventName="Toggled"
Command="{Binding Path=BindingContext.ToggledCommand,
Source={x:Reference
Name=myPage}}"
CommandParameter="{Binding .}"
/>
</Switch.Behaviors>
</Switch>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
注:
对于
EventToCommandBehavior.cs
,可以参考官方示例中的EventToCommandBehavior.cs和BehaviorBase.cs。