Cannot create an instance of UserControl in design view, works in Release mode and at runtime

Viewed 112

I have a user control LoadingIndicatorControl which is displayed in various other controls when loading is happened.

This user control is very simple and looks like this:

<StackPanel HorizontalAlignment="Stretch"
            Visibility="{Binding Loading, Converter={StaticResource Bool2Vis}}">
    <Image x:Name="imgLoadingSpinner"
           gif:ImageBehavior.AnimatedSource="pack://application:,,,/Images/Loading_Spinner.gif"
           HorizontalAlignment="Right"
           Width="30"
           Height="30" />
</StackPanel>

I nest it in other views like this:

<uc:LoadingIndicatorControl Loading="{Binding Loading}"
                            DockPanel.Dock="Bottom"/>

When I run this application it compiles without issues and the loading indicator is displayed as I expect.

However at design time only I'm getting errors about this user control, related to the image resource. This gif is set to Build Action Resource.

In my host view I get this:

design view error

And if I look at the detail of why, it says Cannot locate resource 'images/loading_spinner.gif':

cannot locate resource error

If I look at LoadingIndicatorControl in design view it does in fact locate the loading_spinner.gif resource and gives no errors.

What I have tried:

  • Clean and rebuild numerous times
  • Close VS2019 and reopen
  • Clean, close VS, reopen and rebuild
  • Set Loading_Spinner.gif Build Action to Embedded Resource (was Resource which also works at runtime)
  • Tried platform targets Any CPU, x64, x86

Interestingly, setting to build configuration to Release does prevent the error from appearing! It only appears when Debug is used.

I'm using Visual Studio Professional v16.11.16.

Any ideas how I can fix this?

1 Answers

Just use the direct path to the image:

<Image gif:ImageBehavior.AnimatedSource="Images/Loading_Spinner.gif"
       HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Width="30"
       Height="30" />

If you really need the pack URI, the format is explained here, it look like this:

<Image gif:ImageBehavior.AnimatedSource="pack://application:,,,/SO_72648958;component/Images/Loading_Spinner.gif"
       HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Width="30"
       Height="30" />

Working demo here.

Related