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; }
        set
        {
            _imageProductUrl = value;
            OnPropertyChanged("ImageProductUrl"); 
        }
    }
    
  • 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()
    {
    base.OnAppearing();
    ViewModel.CheckNetFile.Execute(ViewModel.CatalogProduct);
    }

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.

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

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

Tagged:
Sign In or Register to comment.