{"id":38496,"date":"2019-01-11T13:06:39","date_gmt":"2019-01-11T18:06:39","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=38496"},"modified":"2019-03-25T13:26:10","modified_gmt":"2019-03-25T21:26:10","slug":"xamarin-forms-3-5-a-little-bindable-love","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-3-5-a-little-bindable-love\/","title":{"rendered":"Xamarin.Forms 3.5: A Little Bindable Love"},"content":{"rendered":"

\t\t\t\tThis is a guest post contributed by Andrei Nitescu<\/a>, a mobile developer since 2013 and frequent contributor to Xamarin.Forms. He shares about his experiences with other developers on his blog<\/a>, and delivering talks whenever he has the chance.<\/em><\/p>\n

Xamarin.Forms 3.5<\/h2>\n

Xamarin.Forms 3.5-pre2 is now available in pre-release on NuGet and via your Visual Studio NuGet package manager. For a complete list of improvements including Andrei’s BindableLayout contribution, review the full release notes<\/a>.<\/em><\/p>\n

I\u2019d like to share with you some information about one of my contributions to Xamarin.Forms, the bindable layout<\/strong>. As a developer, I love the potential of the layout views to create visually rich views that delight our app users. Xamarin.Forms, the cross-platform mobile application framework, it’s more straightforward to create such custom views that work across all mobile platforms. Xamarin.Forms allows us to write the layout logic to set the size and position of the views only once.<\/p>\n

While the \u201cbinding layout\u201d name might suggest that it’s an addition to the base Layout<\/em> view class, it actually works as an adaptor. It takes a source of data items and calls the Layout<T><\/em> view to create and update its child views based on the changes in the data item source.<\/p>\n

Layouts, a Quick Refresh<\/h2>\n

(Skip this section and the next one if you already know how layouts and data-binding to layouts work. There is no new information on that.)<\/em><\/p>\n

Xamarin.Forms has a special View called Layout. The Layout<\/em> class is a container for other Views and has a specific mission: to position<\/strong> and size<\/strong> its child Views. Here\u2019s the class diagram with all the available layouts in the framework today:<\/p>\n

\"\"<\/a><\/p>\n

The Layout<T><\/em> class is a specialized Layout which exposes a Children<\/em> View collection. Therefore, we can add, remove, or replace child Views to fit our design requirements:<\/p>\n

StackLayout stackLayout =\u2026;\r\n\r\nstackLayout.Children.Add(new Label() { Text = \u2026 });\r\n<\/pre>\n
Layout<T><\/em> is the base class for most common layouts some of which you\u2019ve\u00a0already <\/span> been using, like the StackLayout<\/em> or Grid<\/em> for example. The Layout<T><\/em> makes it possible to create your own layout to size and position child views any way you want; it\u2019s really up to your imagination. There\u2019s excellent documentation and samples on how to build your own custom layouts. Check out Creating a Custom Layout<\/a>.<\/p>\n
Layout + Data Binding<\/h2>\n
When creating the item views for a Layout based on a source of data items, you may have code that looks similar to this:<\/p>\n
void UpdateItems (StackLayout layout, IEnumerable newDataItems)\r\n{\r\n    layout.Children.Clear ();\r\n    foreach (object dataItem in newDataItems) {\r\n        View itemView = CreateItemView(dataItem);\r\n        layout.Children.Add (itemView);\r\n    }\r\n}<\/pre>\n
However, wiring up a collection of data items to a layout view needs to take into account and handle several aspects. For example, we need to check if the data item collection is observable (it implements INotifyCollectionChanged<\/code>). In this case, it subscribes to the collection change event. If the collection instance is replaced, we need to make sure we remove it by listening to the old collection. We also need to handle creating the item view for each data item. Then bind the item view to the data item. Sometimes we may also want the item view to be different depending on the data item.<\/p>\n
Bindable Layout<\/h2>\n
Starting with Xamarin.Forms 3.5.0 pre2, we can use the BindableLayout<\/code> set of attached properties<\/strong> on any Layout<T><\/code> view:<\/p>\n