Xamarin Form การ Binding

จากชื่อ Binding คือการผูก แต่เราจะผูกอะไรกับอะไรหล่ะคับ นั่นแหละคับ วันนี้จะมาอธิบายความหมายและการใช้งานอันแสนน่าใช้ และมันก็จำเป็นที่จะต้องใช้อย่างมากมาย

การ Binding ใน Xamarin Form นั้นคือการผูก Property ของ 2 Objects ย้ำอีกครั้งนะครับจะต้องเป็น Property เท่านั้นที่จะผูกได้ Field ไม่ได้นะครับ ถ้าผูกไปแล้วไม่มาไม่ได้ไม่อัพเดธไม่เห็นก็นั่นแหละคับ เพราะมันไม่ใช่ Property

วันนี้ผมจะมาอธิบายการ Binding แบบ View-to-View Bindings โดยผมจะไม่พูดอะไรมาก เราจะโค๊ดแล้วอธิบายทีหลังนะคับ โดยเราจะเอา Slider กับ Entry มา Bind กัน โดยจะให้ Value ของ Slider Bind กับ Text ของ Entry ดังนี้

<Slider x:Name="slider" 
        Maximum="360" 
        VerticalOptions="CenterAndExpand"/>
<Entry BindingContext="{x:Reference slider}" 
       Text="{Binding Value}" 
       VerticalOptions="CenterAndExpand"/>

จากโค๊ด เราได้สร้าง Slider และตั้งชื่อให้มันว่า slider และสร้าง Entry เพื่อใว้ดูเลขของค่า Value ของ Slider ที่ออกมา โดยเราจะให้ Entry มี BindingContext เป็น Object ของ slider โดย อ้างที่ชื่อของ slider ที่เราได้ตั้งใว้ BindingContext=”{x:Reference slider}” โดยในแต่ละ View จะมี BindingContext ได้เพียง 1 ตัวเท่านั้น และจุดสำคัญต่อไปก็คือการ Binding ค่าอะไรกับค่าอะไร ในที่นี้ผมจะให้ Text ของ Entry Bind กับ Value ของ Slider ใช้โค๊ดนี้ Text=”{Binding Value}” เพียงเท่านี้แล้วลงกด Run ทดสอบลองดู ให้ผู้ใช้ลองเลื่อน Slider และดูค่าที่เปลี่ยนแปลงใน Entry และ ลองเปลี่ยนค่าใน Entry และดู Slider เปลี่ยนแปลงอย่างไร

The Binding Mode

จากโค๊ดด้านบนนี้เราไม่ได้ใส่ Mode ให้กับการ Binding เลยแต่มันกลับทำตัวเป็น TwoWay เฉยเลยใช่ไหมคับ นั่นแหละคับถ้าเราไม่ใส่อะไรเลยมันจะ Default ให้เป็น Mode=Default ซึ่ง มันก็คือ TwoWay Binding นั่นเองคับ เรามาดูแต่ละโหมดกัน่วามีอะไรบ้าง

• Default ก็คือ default ที่อธิบายด้านบนนั่นแหละคับ TwoWay
• OneWay คือ จาก Source to Target
• OneWayToSource คือ จาก Target to Source
• TwoWay คือ จากทั้งสองทาง

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

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

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