ListView (1)

I have studied the overview of Xamarin.Forms through the Quick Start in Xamarin official site, so I have started to study C# and XAML more deeply with ListView control as an example.

I wrote a small program referring to ListView guides in Xamarin official site etc.

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" 
            x:Class="ListView.MainPage">
        <ContentPage.Content>
        <StackLayout>
            <!-- Add a new book to the book list "BookListView" -->
            <Button Text="Add New Book" Clicked="OnNewBook" />
            <Entry x:Name="Entry1" Placeholder="Input New Book"
                Keyboard="Text" />
            <!-- Create a book List "BookListView".
                 Call "OnTap" method, if one of the books is tapped -->
            <ListView x:Name="BookListView" ItemTapped="OnTap" >
                    </ListView>
        </StackLayout>
        </ContentPage.Content>
</ContentPage>

(The source code is also here.)

Create a ListView control "BookListView" listing up book titles.  "OnTap" method is executed if a book title in the list is tapped.
Create a new button "Add New Book" and a new text entry "Entry1" above BookListView. If a new book title is input and the button is tapped, "OnNewBook" method is executed.

MainPage.xaml.cs

using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ListView
{
    public partial class MainPage : ContentPage
    {
        /* Create a book list data "books" as a dynamic data collection
           that provides notifications when a book get added */
        public static ObservableCollection<string> books { get; set; }
        public MainPage()
        {
            /* Create a new book list instance "books"
                            and set the initialize data */
            books = new ObservableCollection<string>()
            { 
                "Killing Floor (Lee Child)", 
                "Man On Fire (A.J.Quinnell)", 
                "The Lion's Game (Nelson DeMille)"
            };

            InitializeComponent();
            /* Bind the book list data "books" to
                 the ListView control "BookListView" */
            BookListView.ItemsSource = books;
        }

        /* Insert the new book to the book list */
        void OnNewBook(object sender, EventArgs e)
        {
            books.Insert(0, Entry1.Text);
        }

        /* If one of the books was tapped, move to the Book Information
           page "BookInfo" with the tapped book information */
        async void OnTap(object sender, ItemTappedEventArgs e)
        {
            string[] TappedBook = { e.Item.ToString() };
            await Navigation.PushAsync(new BookInfo(TappedBook));
        }
    }
}

Create "books" instance using ObservableCollection class to dynamically update "BookListView", set the three book titles as the initial value, and input "books" to "BookListView".


"OnNewBook" method: the new book title from "Entry1" is inserted in the top of "books."

"OnTap" method: move "BookInfo" page with the argument of the book title "TappedBook" tapped in the "BookListView."

App.xaml.cs

using Xamarin.Forms;

namespace ListView
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new MainPage());

        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Use the NavigationPage class to make this app MultiScreen.

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 -->
            <Label x:Name="Label1" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Create a Label control "Label1" in "BookInfo" page.

BookInfo.xaml.cs

using Xamarin.Forms;
namespace ListView
{
    public partial class BookInfo : ContentPage
    {
        /* Book Information Page
                showing the tapped book information */
        public BookInfo(string[] TappedBook)
        {
            InitializeComponent();
            Label1.Text = TappedBook[0];
        }
    }
}

Input the tapped title "TappedBook[0]" to "Label1."

The execution result is as follows:

Initial screen.

Adda a new book title "The Martian (Andy Weir)."

Tap "Killing Floor (Lee Child)" and move to "BookInfo" page.

I have studied new item adding, item tapping and page moving in the ListView control.