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
TextBlockand notImagecontrol.BitmapImage,ImageSource, orUris to display images in WPF. You can reference images that are in your project simply using yourpack://applicationsyntax as long as the Build Action of your image files are set to Resource in the Properties Window.