Wpf Image is not loaded, source issue

Question

I am trying to bind image source to a string. Ive tried everything that I found by googling but still it does not work. My scenario is, I have an Icon folder in my project with some icons in it. I am using Items control like this

  <ItemsControl ItemsSource="{Binding Options}" ItemTemplate="{StaticResource subOptions}" VerticalContentAlignment="Top" >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

Now my data template looks like this

<DataTemplate x:Key="subOptions">
        <StackPanel>
            <TextBlock Text="{Binding Title}" Foreground="White" FontSize="32" Margin="20,10,0,0" Name="TitleTexBlock"/>
            <Border Width="530" Margin="20,10,0,0" Height="200">
                <!--<Image Source="{Binding IconSource, Converter={StaticResource convertStringToImage}}" Width="100" Height="100"/>-->
                <Image Source="{Binding ImageSource}" Width="100" Height="100"/>

                 <!--<TextBlock Text="{Binding ImageSource}" FontSize="30"/>-->
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=TitleTexBlock,Path=Text}" Value="Defaults">
                                <Setter Property="Background" Value="Green"/>
                            </DataTrigger>
                        </Style.Triggers>
                        <Setter Property="Background" Value="DarkRed"/>
                    </Style>
                </Border.Style>
            </Border>
            <ListBox ItemsSource="{Binding Suboptions}" SelectedItem="{Binding ElementName=Options,Path=DataContext.SelectedSuboption}"   ItemTemplate="{StaticResource Inside}" Padding="10,10,10,10" Margin="20,0,0,0" BorderThickness="0">
                <ListBox.Resources>
                    <Style TargetType="ListBox">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Title}" Value="Defaults">
                                <Setter Property="Background" Value="Green"/>
                            </DataTrigger>
                        </Style.Triggers>
                        <Setter Property="Background" Value="DarkRed"/>
                    </Style>
                </ListBox.Resources>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="LightGreen"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </StackPanel>
    </DataTemplate>

Now the Image that is commented out was using this converter

public class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new BitmapImage(new Uri(value.ToString(), UriKind.RelativeOrAbsolute)); 
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new System.NotImplementedException();
    }
}

The value that was coming to the converter was from here

public class Option
{
    public string Title { get; set; }

    private string iconSource = "/Icons/";

    //private string iconSource = "pack://application:,,,MoveA2Options;components/Icons/";
    public string IconSource
    {
        get { return iconSource; }
        set
        {
            iconSource = iconSource + value;
            iconSource += ".png";
        }
    }

I know the path created is correct, because I tried with that Texblock commented out in the Xaml and it was showing correct path. I also tried this approach

public class Option
{
    public string Title { get; set; }

    private string iconSource = "/Icons/";

    //private string iconSource = "pack://application:,,,MoveA2Options;components/Icons/";
    public string IconSource
    {
        get { return iconSource; }
        set
        {
            iconSource = iconSource + value;
            iconSource += ".png";
            imageSource = new BitmapImage(new Uri((iconSource), UriKind.RelativeOrAbsolute));
        }
    }

    private ImageSource imageSource;
    public ImageSource ImageSource
    {
        get { return imageSource; }
        set { imageSource = value; }
    } 

So in this approach that converter is not used, again the textblock shows that the path to the image is correct. But the images either don’t show, or I get some output exceptions. Using any image like this

<Image Source="pack://application:,,,MoveA2Options;components/Icons/CrateHire.png"></Image>

Or this

<Image Source="/Icons/CrateHire.png"></Image>

Works perfectly fine, any ideas of what else I could try to solve it? Is Image in a DataTemplate treated different than an image in a grid?

Kind Regards

Answer 1

The only solution I found in my situation was to modify this line

 private string iconSource = "/Icons/";

to this

  private string iconSource = "../Icons/";