locked
After ImageFailed method is called once, the fallback picture is displayed again every 4 pictures

    Question

  • I have a flipview which shows a collection of pictures from an internetsite. Relevant 1st part of XAML:

    <FlipView x:Name="flpView" BorderBrush="Black" BorderThickness="1">    
    <FlipView.ItemTemplate>        
    <DataTemplate>            
    <Grid>                
    <Image x:Name="img" Source="{Binding Photo}"  ImageFailed="Image_ImageFailed" Stretch="UniformToFill"/>



    (etc) and in code behind, the property Photo is part of this class:

    public class Item    
    {public BitmapImage Photo { get; set; }    }


    which is added for the series of photo's in an ObservableCollection in a loop and then assigned to the flipview:

    bitmapImageFromURL = new BitmapImage(new Uri(cNextPic)); collection.Add(new Item { Photo = bitmapImageFromURL}); // collection is an ObservableCollection

    this.flpView.ItemsSource = collection;


    When something goes wrong with displaying the picture cNextPic, e.g. when it's not present on the website, the XAML redirects to ImageFailed, which shows a built in alternative picture:

    private void Image_ImageFailed(object sender, ExceptionRoutedEventArgs e)
    {Image img = sender as Image;BitmapImage fallbackImage = new BitmapImage();
    fallbackImage.UriSource = new Uri(img.BaseUri, cAltPic); // cAltPic is something like Assets\AltPic.jpg
    img.Source = fallbackImage;}

    This seems to works fine. But now there is something I can not explain: after displaying the fallback picture and browsing through the flipview collection, the fallback picture is displayed again every 4th picture where it should display the (present) assigned picture from the OS. The Image_failed method is only called once as expected, as only 1 picture is missing, but I have no idea why it re-displays every 4th picture. If img.Source = fallbackImage in Image_ImageFailed isn't run, I see one empy picture on the place where no picture could be loaded and tghen the rest show ok, so the 'problem' line is img.Source= .

    I also noted that without an Internet connection, the fallback picture isn't displayed the first time I ran the app but it did display the second time directly afterwards so it looks like the ImageFailed is not reliable. But I can't find another way to check if the pictures can be displayed as this is done at runtime through databinding.

    Can someone give a suggestion about what I should change ?



    Monday, September 1, 2014 10:19 AM

All replies

  • Hi Dick,

    Sounds like your 4th image got cached as fallbackImage, that means each time you display the image, it does not load the image again. For this reason, you could do something with ImageOpened event, try to find out if current image is a fallback image, and if yes, load the correct image again.

    For your second question, without Internet connection, fallback image does not display, that might because the timeout of the Internet connection, for instance the timeout is 2 seconds, but your UI is displayed at the 1st second, the image control cannot recognize that the internet is gone, still waiting for the internet image.

    Here are two approach I can think about for this scenario:

    1, try to identify the internet connection before load the image.

    2, use the fallback image as the default image and update them once the internet image is available.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, September 2, 2014 7:22 AM
    Moderator
  • Thank you James, for your reply. I actually show a picture per day and browse back. I checked your first remark and that seemed to be true if the picture of yesterday is missing (then every 2nd picture will be replaced) but anything above 4 will still let the 4th picture fail. Now both your solutions seem to be very sound but I can't implement them with databinding. Yes, an ImageOpened event is called. But I have no way of knowing in that event which picture is being displayed, which picture it should be and how to correct it when it is about to display the 'fallback' picture. Apart from that, my guess is that it will already display that incorrect picture anyhow when the event is called.

    If I were writing an 'old style' program, I would have used events for browsing, checked the availability of the image and if not, provide the correct alternative. But I can't do that with a flipview, there doesn't seem to be a proper event to catch swiping or clicking the mouse in the arrows anyway.

    If you have another idea that would be great.

    Your second remark is probably better implementable and  sounds very logical. Just waiting 2 seconds to see if there's Internet may do the trick.


    Tuesday, September 2, 2014 2:14 PM