Page and ViewModel (bottom), page ViewModel (

Page and ViewModel (bottom), page ViewModel (

In my previous blog, I shared some thoughts on the page and ViewModel from the perspective of the whole page. In this article, I hope to share some thoughts on the page and ViewModel from the perspective of relative details.

For example, how should we update the bound data in the View Model? The new data instance can be used to replace the old one, but this will easily cause the UI to flash. Especially when data is bound to a list, if the entire list is replaced, you can see that the list is "a flash ". Such user experience is undoubtedly unsatisfactory. When updating the data instance bound to the View Model, we can use the differential update method. Take a data list as an example. Compare the New and Old lists when updating the data list. traverse the new table first and check whether there are any corresponding elements in the old table for each element. If no, it indicates that the data is newly added. You can add the elements in the new table to a temporary table and an old table at the same time. If the old table is sorted, pay attention to the insert position. If yes, it indicates that the old element is updated. After the value of the new element is changed to the new element, add the old element to the temporary table. Then, traverse the old table and check whether there are any corresponding elements in each element of the old table in the temporary table. If yes, no processing is required. If no, it indicates that the element has been deleted and should be removed from the old table. In this way, the UI looks smooth.

Here we will write down the differentiated update algorithm written by the author in wangxin UWP.

Var bList = new List <bool> (); // secondary List for (int j = 0; j <MainList. count; j ++) // The initial length of the secondary list is the same as that of the old table {bList. add (false) ;}for (int I = 0; I <groups. count; I ++) // traverse the new table {bool inserted = false; bool contains = false; for (int j = 0; j <MainList. count; j ++) // compare the elements in the new table with the old table {if (groups [I]. key! = MainList [j]. key) // if not the same element {if (groups [I]. key = "group master") // try to insert | (MainList [j]. key! = "Group master" & MainList [j]. key! = "Administrator" & (groups [I]. key = "Administrator" | groups [I]. key. compareTo (MainList [j]. key) <0) {MainList. insert (j, groups [I]); bList. insert (j, true); inserted = true; Debug. writeLine ("inserted:" + j + "," + groups [I]. key); break ;}} else // if it is the same element, use the new table element content to update the old table {contains = true; MainList [j]. update (groups [I]); bList [j] = true; break ;}} if ((! Contains )&&(! Inserted) // if it is not included in the old table or inserted, It is appended to the end of the old table {MainList. add (groups [I]); bList. add (true) ;}for (int I = bList. count; I> 0; I --) // compare the secondary list to remove elements that should no longer exist in the old table {if (! BList [I-1]) {try {MainList. RemoveAt (I-1);} catch (Exception) {Debug. WriteLine ("RemoveAt error:" + I );}}}

In this Code, use the new data groups to update the old data MainList.

For example, on our pages, we usually place a control that indicates loading data. The status of the loaded control is usually bound to a background data. For general pages, we can set the binding value before and after loading data to modify the loading status displayed on the page. However, for networks that depend on UWP wangxin, it is not appropriate to call multiple network interfaces to update data on a single page at the same time. For example, the interfaces a and B request data at the same time and set the loading status to loading. If the ainterface returns the result first, the load status is set to complete. In fact, interface B is still requesting data, and the correct loading status should still be loading until interface B also returns. For this reason, I have thought of adding a counting variable whose initial value is 0. When a request is loaded, the value increases by 1. When the request ends asynchronously or the callback returns, the value is reduced by 1, the get method of the bound loading status returns whether it is in the loading status based on whether the count is 0. In this way, multiple loading requests can change the loading status correctly.

In wangxin UWP, I added the following variables to ViewModel:

 

        public bool isLoading        {            get { return loadingCount > 0; }        }        private int _loadingCount = 0;        public int loadingCount        {            get { return _loadingCount; }            set { _loadingCount = (value < 0 ? 0 : value); RaisePropertyChanged("isLoading"); }        }

On the xaml page, bind the IsActive attribute of the ProgressRing control to the isLoading variable:

<ProgressRing Grid. row = "2" Grid. rowSpan = "2" IsActive = "{x: Bind thisData. isLoading, Mode = OneWay} "Width =" 60 "Height =" 60 "Foreground =" {ThemeResource WXThemeColorBrush} "> </ProgressRing>

Before and after the asynchronous method is called, The isLoading variable is not directly set. Instead, the loadingCount variable is automatically increased by 1 before the call as mentioned above, after the completion, the loadingCount variable minus 1 method will affect the loading status IsActive displayed by the ProgressRing control.

In addition, when using the x: Bind method, the author finds that if the source bound to the image control is bound to a string, an exception will occur in the log when the bound string value is null. Even if the string value is null, the image control is hidden. However, the attribute values of the data in trademanager are basically transmitted from the server to the client. Sometimes the URLs of some images are empty. In this way, it is best to give the Image property values a default value. How can we determine the default value? If it is a common placeholder image, it may be displayed where the image should not appear. After practice, I chose to add an image with a length of 0 to the application and use the image uri as the default value of the image attribute. Of course, this method only eliminates the exception in log. Whether or not it improves the application efficiency remains to be verified.

The above is my reflection on the details of the page and ViewModel, hoping to help our friends develop UWP applications. Of course, you are also welcome to come up with more and better experiences, so that we can make common progress.