Problem in Databinding to Image Source WPF

Question

Hi all,

I have some problem on databinding to Image's Source Property.

I have a listview Template

<Style x:Key="ListViewStyle" TargetType="{x:Type ListView}">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                  <DataTemplate x:Key="ListViewItemTemplate">
                     <StackPanel Width="60"  Margin="5,5,10,5">
                        <Image Height="40" Width="40" Source="{Binding XPath=@Image}" HorizontalAlignment="Center"/>
                       <TextBlock Text="{Binding XPath=@Name}" TextAlignment="Center" TextWrapping="Wrap" FontWeight="bold" HorizontalAlignment="Center" Margin="0,0,0,1" />
                    </StackPanel>
                  </DataTemplate>
            </Setter.Value>
         </Setter>
</Style>

This Style is defined in a Resource Dictionary File which is added in app.xaml. (So is accessible anywhere)

Now I have a window in which I have used this style for listview. In Winodw.Resources I have created an xmldatasource provider

 <XmlDataProvider x:Key="MyData" XPath="/Reports">
            <x:XData>
                <Reports xmlns="">
                    <Item Name = "Item1" Image="Resources\MenuIcons\Pic1.png"/>
                    <Item Name = "Item2" Image="Resources\MenuIcons\Pic2.png"/>
                    <Item Name = "Item3"  Image="Resources\MenuIcons\Pic3.png"/>
                </Reports>
            </x:XData>
        </XmlDataProvider>

and I have assigned this datasource as Itemsource for Listview

<ListView Name="MyListView" Style="{DynamicResource ListViewStyle}" ItemTemplate="{StaticResource ListViewItemTemplate}"
                                  ItemsSource="{Binding Source={StaticResource MyData},XPath=Item}"/>

My Problem is when I run application ListViewItem's Text is Displaying But Image is missing..

But When I Defined this Style inside Window.Resource and used Style as StaticResource instead of Dynamic Resource, everything works fine.

Can Anybody tell me reason for not desplaying image? I want to use this style Globally.(So I need to define it in ResourceDictionary). Can anyone help me??

Answer 1

I think nobody has answered your question yet because we couldn't see anything wrong.

I decided to try to reproduce your problem, but your code worked perfectly even though I tried to follow your repro steps.

Here are my steps:

1. Created a blank WPF Application
2. Added a ResouceDictionary file Dictionary1.xaml
3. Pasted your <Style> code into Dictionary1.xaml inside the <ResourceDictionary> tag
4. Edited out the typo where you set an x:Key on the DataTemplate
5. Added <Window.Resources> element to the top of Window1.xaml
6. Pasted your <XmlDataProvider> code into the <Window.Resources> tag
7. Replaced image pathnames, eg Image="Resources\MenuIcons\Pic1.jpg" became Image="TestImage.jpg"
8. Pasted your <ListView> code into the <Grid> tag
9. Removed your bogus ItemTemplate value, presuming this was left over from old code
10. Merged the dictionary "Dictionary1.xaml" into the Application's dictionary in App.xaml

Here is the relevant markup from App.xaml:

<Application
   ...>

  <Application.Resources>
    <ResourceDictionary>

      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Dictionary1.xaml" />
      </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>
  </Application.Resources>

</Application>

When I ran the application I saw a ListBox containing images with text underneath.

At this point I suggest you try reproducing my steps and see if your example works or not. If it does, try slowly changing things to be like your app that is not working. At some point you will discover what it is about your app that makes the difference. Then maybe we can give you some better advice how to fix it.

Answer 2

Hmm.. I found the problem... Problem was My Style Dictionary File and Images were in 2 separate directories in Project Directory. I saved All Dictionary Files in Styles Directory and all images in Resources Directory which is outside Styles Directory. So I need to change Image path in xml as

<XmlDataProvider x:Key="MyData" XPath="/Reports">
            <x:XData>
                <Reports xmlns="">
                    <Item Name = "Item1" Image="..\Resources\MenuIcons\Pic1.png"/>
                    <Item Name = "Item2" Image="..\Resources\MenuIcons\Pic2.png"/>
                    <Item Name = "Item3"  Image="..\Resources\MenuIcons\Pic3.png"/>
                </Reports>
            </x:XData>
        </XmlDataProvider>

(I should Add ..\ before path) This solved my problem.. Thanks Ray Burns for your reply.. – Sasikumar D.R. 0