Windows 10 Development Diary (iv)--when the binding encounters async--The problem leads

The importance of binding to MVVM is needless to say, the importance of binding to the DataTemplate is needless to say, the importance of binding does not need to say much, Async also need not say more, today is the end of it ...

-------------------------------------------------cold and cold dividing line------------------------------------------------------

But when you want the binding data to be a result of an asynchronous operation?

This is the actual problem we encountered in the project, once troubled me for a long time, this article is my exploration process, in the process, I tried to solve the problem with different solutions, and consulted other friends, finally found a solution, And more in-depth understanding of the working mechanism of datatemplate, I think it is necessary to record, re-comb the process of exploration, should be able to meet the same problem of students to help.

Our needs:

Display a set of thumbnails of the filter effect, the user clicked on the filter, you can see the effect of the filter applied on the page, similar to this effect

Our solutions:

1. Requires an item collection control, similar to a ListBox (UI work)

2. Requires a Itemcontrol to display the filter's name and processed thumbnails (UI)

3. Need a filter class, need to include filter name and filter information (data)

4. UI and Data integration

Start--Plan One:

1. First make the data, we give a class that represents my filter

public class myfilter{public   filterdata filter{get;set;}//filter related information   

2. Item collection control, Myitemscontrol, has a itemssource that receives a list<myfilter> data source

3. The item control, which displays the filter name and shows the thumbnail that the filter was applied to, Myitemcontrol, I just need a data source, set the Myitemcontrol DataContext to this data source, and then use the binding to OK, Since image needs a imagesource data source, I also need a converter to convert Filterdata to WriteableBitmap

<UserControl.Resources>
   <local:writeablebitmapconverter x:name= "ImageConverter"/>
</UserControl.Resources>
<UserControl>    <Grid>        <image x:name= "Filterimage" Binding={myfilterdata, converter={ StaticResource ImageConverter}/>        <textblock x:name= "Filternametb" binding= {myfiltername}/>    </ Grid></usercontrol>

4. The final step is to implement this writeablebitmapconverter and convert the data into WriteableBitmap that can be received by the image:

public class Imageconverter:ivalueconverter    {public        async task<object> Convert (object value, Type TargetType, object parameter, string language)        {                       WriteableBitmap thumb = await SDK. Getthumbasync ();            var filterdata = value as Myfilterdata;            WriteableBitmap Renderedresult = await SDK. Renderasync (thumb, filterdata);            return renderedresult;        }        public object Convertback (object value, Type targetType, object parameter, string language)        {            throw new notimple Mentedexception ();        }    }

Oh,no! in order to ensure the user experience and UI fluency, my SDK was designed to be asynchronous operation, the converter can write this? The answer is obvious, no.

So the question is: what happens when the binding encounters asynchrony?

Windows 10 Development Diary (iv)--when the binding encounters async--The problem leads