January 28, 2021

Develop for Windows 10 Q&A – (3) XAML and Controls

This Q&A is related to video #3, #4, #5 in Jerry Nixon and Andy Wigley’s A Developer’s Guide for Windows 10. They are about XAML, DataBinding and XAML performance. Because there isn’t much new in each video alone. So I put them in one post.

Q. What’s new in XAML and Windows 10 Controls?

A.  Event though a lot of work had been done about XAML behind the scene, but there isn’t much for developer to learn, which is a great thing. XAML is a markup language (much like HTML) used for application UI design since WPF, Silverlight and Windows Phone 7. XAML is now adopted as a common Windows XAML. The news is all things are still there! The change is the adding of SplitView control and RelativePanel panel, which deserve a separate post. Otherwise, there is no change that you as a developer need to worry about.

Q. What is Compiled Binding and x:Bind

A. Compiled Binding in a new featured added to data binding. It solves the performance issue relating to the data binding process. Before, the binding doesn’t care about the data type your are going to bind to at compile time. However that leave the work to the later. At runtime, the UI elements need to reflect those type information, so the overhead is added to it then.

x:Bind is to explicitly enforce Compiled Binding. The traditional “Binding” keyword is still there but you can use x:Bind if desired. x:Bind assumes current page as DataContext. So your data model should have an instance or reference to an instance in the page code behind. x:Bind is strongly typed, therefore get better IntelliSense and compile time error checking.

Q. How XAML performance is improved in Windows 10?

A. There are two aspects of the same question, one is what you get by default. Without you do anything, just port a 8.1 application to Window 10, you get XMAL related performance boost by about 50%.



The second aspect of the question is how to improve XAML performance on top of that as a developer. They are Progressive Loading and Deferred Loading.

Q. What are Progressive Loading and Deferred Loading?

A. There are two ways to improve your app XAML performance. Loading here refers to put data from data model to XAML UI element, not loading from storage or cloud to data model. Progressive loading means display data by phases instead of loading all at the same time, simply because some data are available quicker, and easier to render, should go to the UI first. Others, like images may be better be shown later. x:Phase is used to facilitate this approach.

Deferred loading means display data only when need to. There is a term called virtualization that I want to talk a little more. You have a long list of object, say 1 thousand items. It will be crazy if you put the entire 1 thousand items into the list in the UI. Instead, you only show the items people can see. Say, only 10 items can be visible at the same time, you may want to put 20 items into the ListVew. At the scrolling event handler, you fetch again based on scroll position. That way, you only have 20 items to work on at anytime, it’s fast and responsive, but to the user, it appears to be 10 thousand items. (Remember to retrieve the total number of items at the beginning. because you need to set scroll bar length to appear to be 1 thousand items.) Virtualization means you fake it, the user doesn’t know.