Xamarin Form List View

สำหรับคนที่เข้ามาแบบงงๆ ผมขอให้คุณผู้อ่านไปทำความเข้าใจกับการ Binding เสียก่อนที่ Link นี้แล้วเรามาทำความรู้จักกับ ListView ยอดนิยมในตำนานกันครับ

เริ่มแรกเรามาสร้าง ListView กันเลยตามโค๊ดนี้คับ

<ListView/>

แล้วลอง Run ดูคับ มันไม่มีอะไรเลย เพราะเรายังไม่มีข้อมูลที่จะมาแสดงไง๊!! งั้นเรามาสร้าง List ชื่อสีกันคับโค๊ดตามนี้ ไปแปะใว้ที่ MainPage.xaml.cs

public List<string> ColorNames { get; set; } = new List<string>
 {
  "Red",
  "Green",
  "Blue"
 };

ลองรันดูอีกที แต่ว่าไม่ต้องทำนะคับ มันก็ไม่มีอะไรอยู่ดี เพราะเรายังไม่ Bind ไง๊

<ListView ItemsSource="{Binding ColorNames}"/>

โดย ColorNames จะต้องเป็นชื่อของ Property ที่เราสร้างมา ในที่นี้ก็คือ ColorNames นั่นแหละคับ แล้วทีนี้ก็รัน

เป็นไงคับก็ยังไม่ขึ้นอยู่ดี เพราะว่ามัน Bind ไปที่ Context ไหนหล่ะคับ อย่างที่บอกคับเราต้องให้ Object ที่ต้องการ Bind มาผูกกันก่อนที่จะ Bind ข้อมูลจริงๆ ในทีนี้ผมจะให้ทั้งหน้า View นี้ BindingContext ไปที่ตัวเองเลย ตามโค๊ดนี้ครับ

<ContentPage.BindingContext>
 <x:Reference Name="This" />
</ContentPage.BindingContext>

และอย่าลืมประกาศ x:Name=”This” ด้วยเพื่อให้หน้านี้ reference ถึงฝั่ง C#

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Tutorial"
             x:Class="Tutorial.MainPage"
             x:Name="This">

จะได้หน้าตาประมาณแบบนี้

ด้านบนคือการ BindingContext ใน Xaml ครับ ส่วนอันนี้คือสำหรับใน C# โดยใส่ใว้ภายใต้ InitializeComponent(); ที่อยู่ใน Constructor ของ View นั้น

BindingContext = this;

โดยเลือกใช้เพียงอย่างใดอย่างหนึ่งเท่านั้นนะครับและจะเห็นว่าของ C# ดูบรรทัดเดียวง่ายกว่าใช่ไหมคับ แต่ผมแนะนำให้ใช้ในแบบ Xaml เพราะผมคิดว่าในส่วนโค๊ด C# นั้นเราควรปล่อยให้เป็น logic ของการแสดง View ซ่อนปุ่ม เปลี่ยนสีต่างๆเก็บข้อมูล Property ไปอย่างเดียว แล้วให้หน้า View xaml ทำหน้าที่ Bind มาทีเดียว จะได้ไม่ต้องมางมโค๊ดหาว่า ทำใมข้อมูลมีตรงนี้แต่มันไป Bind กันตอนไหน เมื่อแอปเกิดใหญ่ขึ้นจะเกิดปัญหาได้อย่างแน่นอน ผมคิดว่า Best Practice คือเราควรรวมการ Binding ใว้ที่ Xaml ครับ

คับ

ref: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-binding-basics#bindings-and-collections

ref: https://forums.xamarin.com/discussion/69279/how-to-set-bindingcontext-to-a-page-itself