How to check error loading url image

How-to Discussions
1

I’m loading an image from a url and need to show text when it can not be loaded.

<Circle Width="36" Height="36">
    <ImageFill Url="...." StretchMode="Uniform"/>
</Circle>

I tried using WhileFailed Trigger and the function error of HttpImageSource and it did not work.

2

Hi Lucas,

it seems that WhileFailed should do what you’re after. If it did not work, could you please provide a complete, minimal reproduction that shows exactly how it doesn’t work when it should?

3 
<App>
  <ClientPanel>

    <StackPanel Alignment="Center" ItemSpacing="10">
      <Text Value="This image works" Alignment="Center"/>
      <Circle Width="80" Height="80">
        <ImageFill Url="http://portal.ema.net.br/www/doxportal/images/cliforemp/2549.jpg" StretchMode="Uniform"/>

        <Stroke Width="1" Color="#00cc00"/>
      </Circle>

      <Text Value="This image does not work" Alignment="Center"/>
      <Circle Width="80" Height="80">
        <ImageFill Url="http://portal.ema.net.br/www/doxportal/images/cliforemp/1234.jpg" StretchMode="Uniform"/>

        <Stroke Width="1" Color="#ff3300"/>
      </Circle>
    </StackPanel>

  </ClientPanel>
</App>

The second image is not loading. I need to do some treatment if that happens. I tried using the WhileFailed within ImageFill and it did not work.

4

What if you try to put it on the parent Circle, like so?

<App>
  <ClientPanel>

    <StackPanel Alignment="Center" ItemSpacing="10">
      <Text Value="This image works" Alignment="Center"/>
      <Circle Width="80" Height="80">
        <ImageFill Url="http://portal.ema.net.br/www/doxportal/images/cliforemp/2549.jpg" StretchMode="Uniform"/>

        <Stroke Width="1" Color="#00cc00"/>
      </Circle>

      <Text Value="This image does not work" Alignment="Center"/>
      <Circle Width="80" Height="80">
        <WhileFailed>
                <!-- ... -->
        </WhileFailed>
        <ImageFill Url="http://portal.ema.net.br/www/doxportal/images/cliforemp/1234.jpg" StretchMode="Uniform"/>

        <Stroke Width="1" Color="#ff3300"/>
      </Circle>
    </StackPanel>

  </ClientPanel>
</App>
5

Did not work … Does not fire the WhileFailed event.

6

Lucas, could you show the exact code where you use the WhileFailed? e.g., what did you put inside of it?

7

Inside the Circle I tried like this:

<WhileFailed>
  <Text Value="Failed"/>
</WhileFailed>

And so:

<WhileFailed>
  <Change failedText.Value="Failed"/>
</WhileFailed>

Declaring in StackPanel the Text

<Text ux:Name="failedText"/>
8

Ok, that’s a decent way to tell that something’s not working, thanks for clarifying.

Checked with the gurus, it seems WhileFailed does not work with ImageFill. A workaround would be to put an invisible Image with the same URL, like so:

<Image Url="http://portal.ema.net.br/www/doxportal/images/cliforemp/1234.jpg" Visibility="Hidden" />

and using WhileFailed on that instead. For the visible part, you can still use ImageFill.

Hope this helps!

9

It worked. Thanks for your help!