Xamarin: Data Binding và Binding Context
Hello các bạn,
Qua bài học 1(Tại: đây) ta đã biết được cách để tạo 1 Xamarin form và thực thi chương trình.
Nay bài 2, chúng ta sẽ tiếp tục với Data Binding và Binding Context nhé. Đây là 2 phần quan trọng của Xamarin Form giúp chúng ta xử lý, sử dụng dữ liệu.
Data Binding là gì? Ta có thể gặp Data Binding này ở rất nhiều nơi ví dụ như: AngularJS, Silverlight, WPF,… Đây là 1 cách để ta kết nỗi dữ liệu từ UI Element(control) với một data object nào đó, ràng buộc, trói nó lại với nhau.
Để dễ hiểu hơn,chúng ta bắt đầu luôn.
Bắt đầu với Data Binding:
Ví dụ ta có 2 controls này:
Với Xaml như sau:
<Slider /> <Label />
Và bây giờ, để binding 2 cái này lại với nhau thì điều ta cần làm là binding chúng lại:
Tới đây chắc các bạn cũng hiểu sơ rồi nhỉ. Và bây giờ để Binding chúng nó lại, thì ta làm như sau:
Có 2 cách:
- Cách thường: Sử dụng Event của Slider là ValueChanged.
- Sử dụng Data Binding.
Và tất nhiên, cách Data Binding vẫn tốt nhất có thể (trong trường hợp này).
Ta sẽ bắt đầu đặt tên cho Slider bằng parameter x:Name
<Slider x:Name="mySlider" />
Vì sao phải đặt tên? Đăt tên để ta có thể biết được control này để mà lấy dữ liệu cũng như là sử dụng trong Code-Behind nếu cần :v
Và ở tại Label, ta bắt đầu Reference tới như sau:
<Label Text="{Binding Source={x:Reference mySlider}, Path=Value}" />
Giải thích: Vì ta cần nối tới Slider có tên là mySlider, ta phải Reference tới mySlider. Ta cần lấy Value từ Slider cho nên chỉ việc gọi Path ra là Value thôi. Với expression này ta có thể sử dụng trong mọi params như Text, Detail, Opacity,…
Khi ta chạy thử, ta sẽ thấy được như hình dưới:
Chưa có chữ “Giá trị nhỉ” Để thêm chữ giá trị, ta chỉ cần thêm StringFormat thôi:
<Label Text="{Binding Source={x:Reference mySlider}, Path=Value, StringFormat='Giá trị: {0:n2}'}" />
Các bạn test nhé 😀
Tìm hiểu BindingContext:
Như vậy các bạn đã thấy, ta có thể sử dụng Binding Source theo kiểu Data Binding cơ bản. Nhưng nếu ta muốn sử dụng nhiều Value trong 1 Label thì sao, hoặc là nhiều Controls cần dữ liệu đó? Nếu cứ tiếp tục Binding Source thì nó quá dài, vậy nên ta sẽ tìm hiểu Binding Context.
Ví dụ mình có 3 controls:
<StackLayout>
<BoxView Color="Red" />
<Label />
<Slider x:Name="sli" />
</StackLayout>
Nếu cả 2 BoxView và Label cùng sử dụng Binding Reference thông thường kia thì sẽ quá dài và xấu code, ta sẽ sử dụng BindingContext như sau:
<StackLayout BindingContext="{x:Reference sli}">
<BoxView Color="Red" Opacity="{Binding Value}" />
<Label Text="{Binding Value, StringFormat='Giá trị: {0:n2}'}" />
<Slider x:Name="sli" />
</StackLayout>
Giải thích: BindingContext giúp ta nối tới 1 UI Element nào đó, và có thể xài chung được cho bản thân + con của tag đó. Ở đây parent là StackLayout và Child là BoxView & Label.
Như vậy khi test, ta sẽ được:
BoxView sẽ mờ theo giá trị, và giá trị Label sẽ thay đổi theo Slider.
Cám ơn các bạn đã quan tâm theo dõi bài Data Binding và Binding Context!
Bài tiếp theo sẽ là: Sự khác biệt giữa các Device Android/iOS.
