Xamarin Forms 使详细信息视图可编辑
Xamarin Forms Make detail view editable
我第一次尝试使用 Xamarin,并停留在基础上。
构建主视图,一切正常,可以添加新项目。
但是,当单击现有项目时,它是只读的。
我已经实现了编辑按钮,但不知道如何在详细视图中使项目可编辑。
我的 ItemDetailPage.xaml
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="DataCollector.Views.ItemDetailPage"
Title="{Binding Title}">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Delete" Clicked="ToolbarItem_Clicked" />
<ToolbarItem Text="Edit" Clicked="Edit_Clicked" />
</ContentPage.ToolbarItems>
<StackLayout Spacing="20" Padding="15">
<Label Text="WTN Number:" FontSize="Medium" />
<Label Text="{Binding Item.WTNNumber}" d:Text="Item name" FontSize="Small"/>
<Label Text="Description:" FontSize="Medium" />
<Label Text="{Binding Item.Description}" d:Text="Item description" FontSize="Small"/>
</StackLayout>
</ContentPage>
和ItemDetailPage.xaml.cs
using System;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using DataCollector.Models;
using DataCollector.ViewModels;
namespace DataCollector.Views
{
// Learn more about making custom code visible in the Xamarin.Forms previewer
// by visiting https://aka.ms/xamarinforms-previewer
[DesignTimeVisible(false)]
public partial class ItemDetailPage : ContentPage
{
ItemDetailViewModel viewModel;
public ItemDetailPage(ItemDetailViewModel viewModel)
{
InitializeComponent();
BindingContext = this.viewModel = viewModel;
}
public ItemDetailPage()
{
InitializeComponent();
var item = new Item
{
WTNNumber = "Item 1",
Description = "This is an item description."
};
viewModel = new ItemDetailViewModel(item);
BindingContext = viewModel;
}
private void Delete_Clicked(object sender, EventArgs e)
{
}
private void Edit_Clicked(object sender, EventArgs e)
{
}
}
}
和ItemDetailViewModel.cs
using System;
using DataCollector.Models;
namespace DataCollector.ViewModels
{
public class ItemDetailViewModel : BaseViewModel
{
public Item Item { get; set; }
public ItemDetailViewModel(Item item = null)
{
Title = item?.WTNNumber;
Item = item;
}
}
}
如何通过 ItemDetailViewModel 的变化来实现?
既然你用过MVVM,逻辑在ViewModel中处理会更好
所以你可以像下面这样改进它。
在xaml
<ContentPage.ToolbarItems>
<ToolbarItem Text="Delete" Command="{Binding DeleteCommand}"/>
<ToolbarItem Text="Edit" Command="{Binding EditCommand}" />
</ContentPage.ToolbarItems>
在视图模型中
public class ItemDetailViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
Item item;
public Item Item {
get {
return item;
}
set
{
if(item!=value)
{
item = value;
NotifyPropertyChanged("Item");
}
}
}
public ICommand DeleteCommand { get; set; }
public ICommand EditCommand { get; set; }
public ItemDetailViewModel (Item item )
{
var Title = item?.WTNNumber;
Item = item;
DeleteCommand = new Command(()=> {//...
});
EditCommand = new Command(()=> {
Item.WTNNumber = "new item";
Item.Description = "new Description";
// do something when click the edit button
});
}
}
模型中
public class Item : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
string wTNNumber;
public string WTNNumber
{
get
{
return wTNNumber;
}
set
{
if (wTNNumber != value)
{
wTNNumber = value;
NotifyPropertyChanged("WTNNumber");
}
}
}
string description;
public string Description
{
get
{
return description;
}
set
{
if (description != value)
{
description = value;
NotifyPropertyChanged("Description");
}
}
}
}
我第一次尝试使用 Xamarin,并停留在基础上。 构建主视图,一切正常,可以添加新项目。 但是,当单击现有项目时,它是只读的。 我已经实现了编辑按钮,但不知道如何在详细视图中使项目可编辑。 我的 ItemDetailPage.xaml
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="DataCollector.Views.ItemDetailPage"
Title="{Binding Title}">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Delete" Clicked="ToolbarItem_Clicked" />
<ToolbarItem Text="Edit" Clicked="Edit_Clicked" />
</ContentPage.ToolbarItems>
<StackLayout Spacing="20" Padding="15">
<Label Text="WTN Number:" FontSize="Medium" />
<Label Text="{Binding Item.WTNNumber}" d:Text="Item name" FontSize="Small"/>
<Label Text="Description:" FontSize="Medium" />
<Label Text="{Binding Item.Description}" d:Text="Item description" FontSize="Small"/>
</StackLayout>
</ContentPage>
和ItemDetailPage.xaml.cs
using System;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using DataCollector.Models;
using DataCollector.ViewModels;
namespace DataCollector.Views
{
// Learn more about making custom code visible in the Xamarin.Forms previewer
// by visiting https://aka.ms/xamarinforms-previewer
[DesignTimeVisible(false)]
public partial class ItemDetailPage : ContentPage
{
ItemDetailViewModel viewModel;
public ItemDetailPage(ItemDetailViewModel viewModel)
{
InitializeComponent();
BindingContext = this.viewModel = viewModel;
}
public ItemDetailPage()
{
InitializeComponent();
var item = new Item
{
WTNNumber = "Item 1",
Description = "This is an item description."
};
viewModel = new ItemDetailViewModel(item);
BindingContext = viewModel;
}
private void Delete_Clicked(object sender, EventArgs e)
{
}
private void Edit_Clicked(object sender, EventArgs e)
{
}
}
}
和ItemDetailViewModel.cs
using System;
using DataCollector.Models;
namespace DataCollector.ViewModels
{
public class ItemDetailViewModel : BaseViewModel
{
public Item Item { get; set; }
public ItemDetailViewModel(Item item = null)
{
Title = item?.WTNNumber;
Item = item;
}
}
}
如何通过 ItemDetailViewModel 的变化来实现?
既然你用过MVVM,逻辑在ViewModel中处理会更好
所以你可以像下面这样改进它。
在xaml
<ContentPage.ToolbarItems>
<ToolbarItem Text="Delete" Command="{Binding DeleteCommand}"/>
<ToolbarItem Text="Edit" Command="{Binding EditCommand}" />
</ContentPage.ToolbarItems>
在视图模型中
public class ItemDetailViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
Item item;
public Item Item {
get {
return item;
}
set
{
if(item!=value)
{
item = value;
NotifyPropertyChanged("Item");
}
}
}
public ICommand DeleteCommand { get; set; }
public ICommand EditCommand { get; set; }
public ItemDetailViewModel (Item item )
{
var Title = item?.WTNNumber;
Item = item;
DeleteCommand = new Command(()=> {//...
});
EditCommand = new Command(()=> {
Item.WTNNumber = "new item";
Item.Description = "new Description";
// do something when click the edit button
});
}
}
模型中
public class Item : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
string wTNNumber;
public string WTNNumber
{
get
{
return wTNNumber;
}
set
{
if (wTNNumber != value)
{
wTNNumber = value;
NotifyPropertyChanged("WTNNumber");
}
}
}
string description;
public string Description
{
get
{
return description;
}
set
{
if (description != value)
{
description = value;
NotifyPropertyChanged("Description");
}
}
}
}