Xamarin Form Binding Value Converters

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

Binding Value Converter ตามชื่อนั้นก็คือการเปลี่ยนค่าที่จะนำมาใช้ให้เป็นอีกค่า ที่ไม่ใช่ค่าที่ได้มาตรงๆ หรือภาษาที่ผมคิดว่าผู้อ่านจะเข้าใจก็ ผมอยากให้ Status นี้เป็น สีเขียว อีก Status หนึ่งเป็นสีแดง พอมองเห็นภาพหรือยังคับว่า เราจะ Convert Status ที่อาจจะเป็น int เลข 0 1 หรือจะเป็น Enum มาเป็น Color สีที่เราจะแสดงนั่นเอง

ซึ่งก่อนอื่นใดเราจะต้องสร้างคลาส Converter โดยตั้งชื่อแบบสื่อๆว่า StatusToColorConverter.cs และ Implement Interface ของ IValueConverter เราจะได้หน้าตาแบบนี้

• Convert คือตัวเมธอดหลักที่เราจะเอาค่าใดๆส่งมา แล้วแปลงเป็นค่าที่ต้องการส่งกลับไป
• ConverBack คือเมธอดที่กลับกันมีใว้แปลงกลับตามชื่อคับ(ซึ่งวันนี้ผมจะไม่สนใจตัวนี้ ผมจะปล่อยมันใว้อย่างนั้น)
• value คือค่าที่เราส่งมาจากการ Binding โดยมาเป็น object เราจะต้องแปลงเป็น class ที่เราคิดว่าใช่แน่ๆก่อนนำไปใช้
• ที่เหลือไม่รู้คับยังไม่เคยใช้ ถ้าสนใจ Link

กลับมาที่ Convert ก๊อบโค๊ดนี้ไปวางได้เลยคับ วางใว้ในเมธอด Convert

if (value != null)
{
 if (value is int)
 {
  switch ((int)value)
  {
   case 0:
    return Color.Green;
   case 1:
    return Color.Red;
   default:
    return Color.White;
  }
 }
}
return "Error Occur.";

จะมีหน้าตาแบบนี้

จากโค๊ดคือ เราเชคก่อนว่า value เป็น null หรือไม่ และเชคอีกทีว่าเป็น int ไหม โดยผมจะส่งค่า int เข้ามานะคับเป็นเลข 0 กับ 1 เพื่อจะ return สีกลับออกไปที่ View

ต่อมาเราจะมาปรับแต่งหน้า view ให้สวยงามตามนี้คับ

ฝั่ง C# เราจะสร้าง Property ชื่อ Status และให้เป็นเลข 1

มาทำความเข้าใจกัน

• 1 คือการประกาศ Name Space ให้กับคลาส StatusToColorConverter ของเรานะครับ
• 2 คือการสร้าง Resource ให้กับ View นี้ และเราตั้งชื่อให้มันเป็น statusConverte เพื่อนำไปใช้ใน 3
• 3 คือการ Binding ของ Background Color กับ Property Status และนั่นแหละคับตามโค๊ด

มาดูผลลัพธ์ถ้า Status เป็น 1 กันคับ เราจะได้แบบนี้

ถ้าเป็น 0 ก็จะได้แบบนี้

จบครับ

ref: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-binding-basics#binding-value-converters