ListView (2)

Having studied the basic function of the ListView control in the previous post, ListView (1), a variable "books" was declared as a list of book titles. But book information includes some attributes, author, date of issue etc., as well as title. So it seems to be good that book information is declared as a Class as below.

Book Class

public class Book
{
     public string Title { get; set; }
     public string Author { get; set; }
}

The following sample code displays the ListView of book information declared as class type above.

MainPage.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:local="clr-namespace:ListView"
             x:Class="ListView.MainPage">
    <ContentPage.Content>
        <StackLayout Margin="0, 40, 0, 0">
            
            <!-- Add a new book to the book list "BookListView" -->
            <Button Text="Add New Book" Clicked="AddNewBook" />
            <Entry x:Name="Entry_Title" Placeholder="new book Title" Keyboard="Text" />
            <Entry x:Name="Entry_Author" Placeholder="new book Author" Keyboard="Text" />

            <!-- Create a book List "BookListView."
                 Call "OnTap" method, if one of the books is tapped -->
            <ListView x:Name="BookListView" ItemTapped="OnTap">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell
                            Text="{Binding Title, Mode=TwoWay}" 
                            Detail="{Binding Author, Mode=TwoWay}" 
                            TextColor="Black" DetailColor="DimGray" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

(The source code is also here.)

Create a list, "BookListView" in which book titles and authors are assigned to its Text and Detail of the TextCell. And also create a Button and two Entries to add new book information.

MainPage.xaml.cs

using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace ListView
{
    public partial class MainPage : ContentPage
    {
        public class Book
        {
            public string Title { get; set; }
            public string Author { get; set; }
        }

        public static ObservableCollection<Book> Books;
        
        public MainPage()
        {
            InitializeComponent();

            Books = new ObservableCollection<Book>()
            {
                new Book(){Title="Killing Floor", Author="Lee Child" },
                new Book(){Title="Man On Fire", Author="A.J.Quinnell" },
                new Book(){Title="The Lion's Game", Author="Neldon Demille"}
            };
            BookListView.ItemsSource = Books;
        }

        /* Insert the new book to the book list */
        void AddNewBook(object sender, EventArgs e)
        {
            Book new_book;
            new_book = new Book() { Title = Entry_Title.Text, Author = Entry_Author.Text };

            Books.Insert(0, new_book);
        }

        /* Move the Book Information page "BookInfo" when one of the books was tapped, 
           and send the tapped book information to the page */
        async void OnTap(object sender, ItemTappedEventArgs e)
        {
            //Any codes as below, No.1 to 3, is OK to get e.Item as Book class
            /* No.1 */ Book TappedBookClass = (Book)e.Item;
            /* No.2 object o = (object)e.Item;
                    Book TappedBookClass = (Book)o; */
            /* No.3 var TappedBookClass = e.Item as Book; */

            //Send the tapped book information to BookInfo page
            string[] TappedBookString=
                {TappedBookClass.Title, TappedBookClass.Author};
            await Navigation.PushAsync(new BookInfo(TappedBookString));
        }
    }
}

Declared a class "Book" including Title and Author, and created its instance "Books" with ObservableCollection class to enable the interactivity such as new item adding and item tapping.  Set the initial value of the three books, and bind that data to "BookListView."
In "OnTap" method, the tapped book information in "BookListView" are substituted to "TappedBookClass" declared as "Book" class. It was a little bit confusing point, but I found out the three ways shown in MainPage.xaml.cs. To pass class type data rather than just string type data, the code above seems to be necessary. The tapped book information "TappedBookClass" is sent to the "BookInfor" page.

BookInfo.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"
             x:Class="ListView.BookInfo">
    <ContentPage.Content>
        <StackLayout>
            <!-- Display the tapped book title & author -->
            <Label x:Name="TappedBookTitle" TextColor="Black"/>
            <Label x:Name="TappedBookAuthor" TextColor="DimGray"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

BookInfo.xaml.cs

using Xamarin.Forms;

namespace ListView
{
    public partial class BookInfo : ContentPage
    {
        /* Book Information Page
              showing the tapped book title & author */
        public BookInfo (string[] TappedBookString)
        {
            InitializeComponent ();
            TappedBookTitle.Text = TappedBookString[0];
            TappedBookAuthor.Text = TappedBookString[1];
        }
    }
}

Display the tapped book information in "BookInfor" page.

I have studied how to pass class type data as mentioned above.