silverlight 4 image preview from tooltip on datagr

Question

I currently have a datagrid that goes and gets results from my database based on a server file structure. So, we create PDFs and PPTs, load them into the directory, and add them to that database accordingly. Then a user can search for what they need and the results get displayed in my datagrid. There are two columns that have image hyperlink buttons relating to each PDF and PPT for that particular piece.

Then, when a user clicks the PDF icon or PPT icon, it brings up the high-res piece in another window. No problems there, but now I want it so that when a user hovers over the icon, it brings up a preview of the high res piece inside the tooptip. I can hard code images into the tooltip no problem. So in that aspect we created little thumbnail preview images of each PDF/PPT. They are all sized correctly and ready to go, I just need to bind the location to the tooltip so that it basically shows a 'thumbnail' preview for each high-res document.

Here is my XAML:

<sdk:DataGridTemplateColumn x:Name="imageColPdf" Header="PDF" Width="SizeToHeader" IsReadOnly="False">
   <sdk:DataGridTemplateColumn.CellTemplate>
           <DataTemplate>
               <HyperlinkButton HorizontalAlignment="Center" VerticalAlignment="Center" DataContext="{Binding Path=FileName}" Click="HyperlinkButtonPDF_Click" >
                     <Image Source="/PrintOnDemand;component/Images/16x16/page_white_acrobat.png" Stretch="None"  HorizontalAlignment="Center" ></Image>
                          <ToolTipService.ToolTip>
                              <ToolTip>
                                   <ToolTip.Content>
                                       <Image DataContext="{Binding Path=FileName}" Name="LoadPDFImage" Loaded="PDFImageToolTip"/>
                                   </ToolTip.Content>
                               </ToolTip>
                           </ToolTipService.ToolTip>
                       </HyperlinkButton>
                   </DataTemplate>
               </sdk:DataGridTemplateColumn.CellTemplate>
           </sdk:DataGridTemplateColumn>

Then here is the code-behind for the tooltip loaded image event:

private void PDFImageToolTip(object sender, RoutedEventArgs e)
    {

        string docname = ((System.Windows.FrameworkElement)((e.OriginalSource as Image).DataContext)).ToString();
        string baseUri = "http://localhost:51840/ShowDocument.aspx?DocumentName=" + docname + "&type=pdfjpg";
        var hostingWindow = HtmlPage.Window;
        hostingWindow.Navigate(new Uri(baseUri, UriKind.Absolute), "_blank");
    }

I did this method on the click event to call the high res documents, but when i try to load the images through the tooltip, I am getting an error every time I debug (System.NullReferenceException) and object reference not set to an instance of an object. It seems to not be able to get the correct filename/source path of the image. It fails every time on the string docname. Ok so, my question is, how can I get it to properly go through and display the image we already have set up.

Answer 1

It looks like you are casting DataContext to a FrameworkElement before calling ToString(), Is that intended?

string docname = ((System.Windows.FrameworkElement)((e.OriginalSource as Image).DataContext)).ToString();

Also sender in this handler should be your Image instance. Perhaps this will serve you better:

String docname = ((FrameworkElement)sender).DataContext.ToString()

Next, the DataContext Binding on HyperLinkButton is certainly not doing you any favours. You should remove it altogether. Presently, the Binding will be looking for a FileName property on your FileName string.

Alternatively, remove the DataContext binding from Image and it should work.