Xamarin Forms Make detail view editable

Question

My first try with Xamarin, and stuck on the basic. Build Master-View, all working fine, can add new items. However when click on existing item it is read only. I have implemented edit button, but do not know how to make item editable in the detail view. My 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>

and 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)
            {

            }
        }
    }

and 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;
        }


    }
}

How to do it through ItemDetailViewModel changes?

Answer 1

Since you had used MVVM .It would be better to handle the logic in ViewModel .

So you could improve it like following .

in xaml

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Delete" Command="{Binding DeleteCommand}"/>
    <ToolbarItem Text="Edit" Command="{Binding EditCommand}" />
</ContentPage.ToolbarItems>

in View Model

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
        });

    }



}

in model

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");
            }
        }

    }

}