[XF] ListView 事件

練習 ListView 事件 - ItemTapped

app.xaml.cs

namespace ListViewEvent
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MasterPage());
        }

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

Product.cs

namespace ListViewEvent
{
    public class Product
    {
        public string Name { get; set; }

        public override string ToString()
        {
            return Name;
        }

        public static List<Product> GetData()
        {
            return new List<Product>
            {
                new Product() { Name = "楓葉" } ,
                new Product() { Name = "樹" } ,
                new Product() { Name = "花" } ,
                new Product() { Name = "煙火" } ,
                new Product() { Name = "夜景" }
            };
        }
    }
}

ViewModel

using System.Collections.ObjectModel;
using System.ComponentModel;

namespace ListViewEvent
{
    public class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public ObservableCollection<Product> UpdatableSource { get; set; }

        public ViewModel()
        {
            ObservableCollection<Product> ProdList = new ObservableCollection<Product>();
            foreach (var item in Product.GetData())
            {
                ProdList.Add(item);
            }

            UpdatableSource = ProdList;
        }
    }
}

MasterPage.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:ListViewEvent"
             x:Class="ListViewEvent.MasterPage"
             Title="主頁面">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <StackLayout>
            <ListView 
                x:Name="lv"
                ItemsSource = "{Binding UpdatableSource}"
                ItemTapped="Lv_ItemTapped"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

MasterPage.xaml.cs

namespace ListViewEvent
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MasterPage : ContentPage
    {
        public MasterPage()
        {
            InitializeComponent();
        }

        private void Lv_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            Navigation.PushAsync(new DetailPage(e.Item as Product));
        }
    }
}

DetailPage.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="ListViewEvent.DetailPage"
             Title="明細頁面">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Label x:Name="lblName"></Label>
            <Image x:Name="img"
                   Aspect="AspectFit">
            </Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

DetailPage.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ListViewEvent
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DetailPage : ContentPage
    {
        public DetailPage()
        {
            InitializeComponent();
        }

        public DetailPage(Product p)
        {
            InitializeComponent();
            lblName.Text = p.Name;
            img.Source = ImageSource.FromResource($"ListViewEvent.Image.{p.Name}.jpg");
        }
    }
}

延伸閱讀
• [XF] Image - 內嵌資源
• [XF] ListView - 更新資料