1

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 ?

Belterius
  • 738
  • 1
  • 10
  • 20
  • 1
    Probably the easiest fix is to [detect design mode](http://stackoverflow.com/a/834332/1997232) in converter and don't try to resolve image in such case (return `null`). – Sinatr Oct 06 '16 at 11:12
  • http://stackoverflow.com/a/11948876/3955716 – Rom Oct 06 '16 at 11:15
  • @Sinatr if works okayish, I now see my Windows, but (as I return null ...) I don't see my images so it's still annoying to have an idea of my rendering. If you have a way to return my Images in the code specific to the design mode, I'll accept it as an answer. – Belterius Oct 06 '16 at 11:24
  • @Rom Already done. – Belterius Oct 06 '16 at 11:24
  • Ok I am having the same exact issue. I created a user control with an image, then when I embed the user control in a window, the image resource is not available. But when I compile and run, it shows perfectly fine. I think this may be a VS bug which is very annoying. – Mike Jul 28 '18 at 05:35

2 Answers2

5

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.

Mike
  • 235
  • 3
  • 15
  • Works for me, but with no Namespace and Uri as "UriKind.Relative": _new Uri("/MyProject;component/path/to/images/mypng.png", UriKind.Relative)_ – VinZ Dec 08 '20 at 15:57
1

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");
        }
    }
FreeMan
  • 1,417
  • 14
  • 20