IOException : cannot locate resource at Design time only

Question

I'm having a problem with my designer on a MVVM project.

I have a TreeView with a custom DataTemplate :

                             <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Name="img"  Width="20" Height="20" Stretch="Fill" 
                                       Source="{Binding 
                                       RelativeSource={RelativeSource 
                                       Mode=FindAncestor, 
                                       AncestorType={x:Type TreeViewItem}}, 
                                       Path=Header, 
                                       Converter={StaticResource HeaderToImageConverter}}"       
                                       />
                                    <TextBlock Text="{Binding}" Margin="5,0" />
                                </StackPanel>
                            </DataTemplate>

Resource declaration :

<Window x:Class="BlobWorld.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Core="clr-namespace:BlobWorld;assembly=" 
        xmlns:helper="clr-namespace:BlobWorld.Helper"
        mc:Ignorable="d"
        Title="MainWindow" Height="350.459" Width="746.561"
        DataContext="{DynamicResource MainWindowViewModel}">
    <Window.Resources>
        <helper:HeaderToImageConverter x:Key="HeaderToImageConverter"/>
    </Window.Resources>

My Converter is :

public class HeaderToImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if ((value as string).Contains(@"."))
            {
                Uri uri = new Uri("pack://application:,,,/images/File.png");
                BitmapImage source = new BitmapImage(uri);
                return source;
            }
            else
            {
                if (!(value as string).Contains(@":"))
                {
                    Uri uri = new Uri("pack://application:,,,/images/folder.png");
                    BitmapImage source = new BitmapImage(uri);
                    return source;
                }
                else
                {
                    Uri uri = new Uri("pack://application:,,,/images/diskdrive.png");
                    BitmapImage source = new BitmapImage(uri);
                    return source;
                }
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotSupportedException("Cannot convert back");
        }
    }

It works perfectly at run-time, but when I'm using the xaml "design" windows in Visual Studio instead of seeing the appearance of my Windows, I only have a IOException : Cannot locate resource 'images/folder.png'

Where is my problem coming from ? How can I fix it ?

Answer 1

I noticed this was never answered and I had the same exact issue that needed a resolution. The resolution to this problem is as follows:

Change:

pack://application:,,,/path/to/images/mypng.png

To:

/Project Namespace;component/path/to/images/mypng.png

That's it! Also make sure your that the Build Action is set to Resource on your images and Copy to Output Directory is set to Do not copy (since this is a resource there is no need to copy the image to the output directory). Your control will now show in design mode.

Answer 2

You can check if it is running on DesignMode or not as follows;

    public class HeaderToImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            bool designMode = (LicenseManager.UsageMode == LicenseUsageMode.Designtime);
            if (!designMode)
            {
                if ((value as string).Contains(@"."))
                {
                    Uri uri = new Uri("pack://application:,,,/images/File.png");
                    BitmapImage source = new BitmapImage(uri);
                    return source;
                }
                else
                {
                    if (!(value as string).Contains(@":"))
                    {
                        Uri uri = new Uri("pack://application:,,,/images/folder.png");
                        BitmapImage source = new BitmapImage(uri);
                        return source;
                    }
                    else
                    {
                        Uri uri = new Uri("pack://application:,,,/images/diskdrive.png");
                        BitmapImage source = new BitmapImage(uri);
                        return source;
                    }
                }
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotSupportedException("Cannot convert back");
        }
    }