Image is not visible in Gridview in wpf

Question

I am trying to display images along with data in listview data item.I am able to see the text item in the List view but not able see the image .I am binding Image with image file path.Same image path is working fine outside the listview in the same page.But inside the List view it is not showing the image .But the border(Yellow) surrounding the image control is visible in the list view .Please help to find the solution

<

ListView Name="lvUsers" Grid.Column="1" Grid.Row="1" Margin="0,5,0,0" Height="Auto" 

                                     Background="{x:Null}"  BorderBrush="{x:Null}" 
                ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"
                VirtualizingStackPanel.IsVirtualizing="True" ScrollViewer.CanContentScroll="True"
                SelectionMode="Single" IsSynchronizedWithCurrentItem="True"



                   IsEnabled="True">
            <ListView.View >
                <GridView  >

                    <GridViewColumn  Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Border Width="30" Height="30" Background="Yellow"  >
                                    <Image Width="10" Height="10" Stretch="Fill"   Source="{Binding Path=DisplayedImage, Mode=Default}"        HorizontalAlignment="Center"  Margin="0,0,0,0" />
                                </Border>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>


                    <GridViewColumn Width="120" DisplayMemberBinding="{Binding EmpName}">
                        <GridViewColumn.Header>
                            <GridViewColumnHeader Tag="EmpName" Click="lvUsersColumnHeader_Click">Name</GridViewColumnHeader>
                        </GridViewColumn.Header>
                    </GridViewColumn>

                </GridView>
            </ListView.View>
        </ListView>

        <Border Width="30" Height="30" CornerRadius="10,10,10,10 "  >
            <Image x:Name="Avatar" Source="{Binding Path=DisplayedImage, Mode=Default}"     VerticalAlignment="Center"   HorizontalAlignment="Center"  Margin="0,0,0,0" />
        </Border>
    </Grid>


</UserControl>

My code behind as follow: Name space and page intiatization code:

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Linq;
using System.Text;
using System.Data.OleDb;
using System.Configuration;
using System.Data;
using System.Windows.Input;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


  public ProjectTracker()
    {
        InitializeComponent();


        List<DataTable> items = new List<DataTable>();

        items.Add(loademp());

        lvUsers.ItemsSource = loademp().DefaultView;
         DataContext = new MainSideBar_viewModel();


    }

Object in view model for image source binding :

   public string DisplayedImage
    {

         get { return @"C:\faisal\Xerox2014\wpf\gsktid\P11376fs2.JPG"; }

    }

Answer 1

You could use a RelativeSource to bind to a property of the view model from within the CellTemplate :

<GridViewColumn Width="50" >
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <Border Width="30" Height="30" Background="Yellow"  >
                <Image Width="10" Height="10" Stretch="Fill"
                       Source="{Binding Path=DataContext.DisplayedImage, RelativeSource={RelativeSource AncestorType=ListView}}"
                       HorizontalAlignment="Center" Margin="0,0,0,0" />
            </Border>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

The default DataContext of the Image is an item in the ItemsSource and this one has no DisplayedImage property apparently.