DataGrid Popup image

Question

I save picture paths to the datagrid rows and i would like to show pop up image when the mouse is over the datagrid row.

Like this:

This is my xaml code:

            <DataGrid Name="DG_selected_pictures" AutoGenerateColumns="False"  Margin="8,74,8,-113.8" IsReadOnly="True">
                <DataGrid.Columns >
                    <DataGridTextColumn Binding="{Binding Path=Picture}" MinWidth="485"   />
                </DataGrid.Columns>
            </DataGrid>

Behind c# code:

        private void BT_select_pictures_click(object sender, RoutedEventArgs e) 
    {
        var picture_list = new ObservableCollection<DataObject>();
        Microsoft.Win32.OpenFileDialog openfile = new Microsoft.Win32.OpenFileDialog();
        //string filter = "Picture files "(*.jpg)|*.jpg|All files (*.*)|*.*";
        openfile.Filter = "Picture files (*.jpg)|*.jpg|All files (*.*)|*.*";
        openfile.Multiselect = true;

        if (openfile.ShowDialog() == true)
        {
            int index = openfile.FileName.LastIndexOf("\\") + 1;
            int lastindex = openfile.FileName.Length - 1;
            string folderPath = openfile.FileName;
            folderPath = folderPath.Remove(index, folderPath.Length - index);
            TB_selected_files_folder.Text = folderPath;
        }
        foreach (String picture in openfile.FileNames)
        {
            i++;
            picture_list.Add(new DataObject() { Picture = picture });
            selected_pictures.Add(picture);
        }
        LB_selected_pictures_count.Content = Convert.ToString(i) + " db";

        this.DG_selected_pictures.ItemsSource = picture_list; // This is the datagrid

    }

The prolem is that i don't know how can i do it. Tool tip or pop up? And what is the syntax?

Thanks and sorry for my bad english.

Answer 1

ToolTip for DataGridCell will be visible when cursor is over column cells:

<DataGridTextColumn Binding="{Binding Path=Picture}" MinWidth="485">
    <DataGridTextColumn.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="ToolTip">
                <Setter.Value>
                    <Image Source="{Binding Path=Picture}"/>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

Answer 2

You can use the IsMouseOver property to determine if the mouse is over an object, and a MultiDataTrigger to evaluate multiple conditions.

<Style TargetType="Image">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True" />
                <Condition Binding="{Binding Picture, Converter={StaticResource IsImageNullConverter}}" Value="False" />
            </MultiDataTrigger.Conditions>

        </MultiDataTrigger>
    </Style.Triggers>
</Style>