0

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

10
  • In DataTemplate posted above you are using TextBlock and not Image control. Commented Aug 15, 2014 at 13:47
  • Yes, that was just to test if the path is correct, but this line <Image Source="/Icons/CrateHire.png"></Image> instead of the textblock does not work Commented Aug 15, 2014 at 13:52
  • You don't need to use any BitmapImage, ImageSource, or Uris to display images in WPF. You can reference images that are in your project simply using your pack://application syntax as long as the Build Action of your image files are set to Resource in the Properties Window. Commented Aug 15, 2014 at 14:01
  • @adminSoftDK - You can bind directly with string value. Default converter will convert your string to ImageSource object, you don't need to worry about it. Commented Aug 15, 2014 at 14:06
  • Well, i tried that and the images dont show up,the output window shows these errors, System.Windows.Data Error: 23 :Cannot convert 'pack://application:,,,MoveA2Options;components/Icons/Accounting.png' from type 'String' to type 'System.Windows.Media.ImageSource' for 'en-US' culture with default conversions; System.Windows.Data Error:6 'TargetDefaultValueConverter' converter failed to convert value'pack://application:,,,MoveA2Options;components/Icons/Accounting.png' (type 'String'); fallback value will be used, if available Commented Aug 15, 2014 at 14:07

1 Answer 1

1

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

 private string iconSource = "/Icons/"; 

to this

 private string iconSource = "../Icons/"; 
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.