Pre-load images onto DataTemplate

clopezclopez ESMember ✭✭

Hello, everyone:

Another question about binding. Lately, I could figure it out how to put an image in a normal page while I wait an answer from the server to know if an image exist or not:

  • I made a string on my ViewModel for Binding on my page:
    string _imageProductUrl;

    public string ImageProductUrl
        get { return _imageProductUrl; }
            _imageProductUrl = value;
  • In the ViewModel constructor I setted ImageProductUrl with a local file representing "no image loaded"

  • Then I created this command. It checks if a file exists in the server and, if we get a 200 response, it change the ImageProductUrl value:
    Command _CheckNetFile;

    public Command CheckNetFile
        get { return _CheckNetFile ?? (_CheckNetFile = new Command(ExecuteCheckNetFile)); }
    async void ExecuteCheckNetFile ()
        string _fileUrl = myUrlDefinedElsewhere;
        //Request creation
        HttpClient httpClient = new HttpClient();
        HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Head, new Uri(_fileUrl));
        //Request send
        HttpResponseMessage response = await httpClient.SendAsync(request);
        if (response.StatusCode == HttpStatusCode.OK)
            ImageProductUrl = _fileUrl;
  • And finally, in the code behind my xaml page, I overwrote the OnAppearing method like this:
    protected override void OnAppearing()

I don't know if this code is stylish or not, but it works. But this is not the subject of my question.
Now I have another page: the list of products. This page uses a ListView, but this list is using a DataTemplate written on a View file.

        <ViewCell StyleId="disclosure">
            <ContentView Padding="10,10">
                <StackLayout Orientation="Horizontal" Spacing="0">
                        BindingContext="{x:Reference ThumbnailImage}" 
                        IsEnabled="{Binding IsLoading}" 
                        IsVisible="{Binding IsLoading}" 
                        IsRunning="{Binding IsLoading}"/>
                        Source="{Binding ThumbnailImageUrl, Converter={StaticResource itemImageToUrlConverter}}" />
                    <StackLayout Spacing="0">
                        Text="{Binding Name}" />
                        Text="{Binding Description}"/>

As you can see, what I'm doing now is using a converter to get the name of the file and convert it to a valid URL, but I would like to do something similar as I did on the detail page before, to show a default image if the file is not existing on the server, but because it's using a DataTemplate, I can't write a command, or modify the source of "ThumbnailImage" Image, or even use an async method on converter. So if someone can say me how to do it, I'll appreciate it.

PD: I hope you have enough data to work, because I don't know how much code can I share with you ^^U

Sign In or Register to comment.