Click here to Skip to main content
15,892,674 members
Search within:


I am Trying to Have a Popup on mouse enter event of a Datagrid row in wpf
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
C#
WPF
DataGrid
I have a Datagrid in a page I want to show a detail data relating to the data grid row data in a popup like tooltip during mouseover on that particular row.
I have created the popup like this:

HTML
<Popup  Height="Auto" Width="Auto" Name="MyToolTip" StaysOpen="True" AllowsTransparency="True"  >
                    <Border BorderThickness="2" removed="BlanchedAlmond" >
                        <StackPanel Margin="30"  Orientation="Horizontal">
                               
                                <WrapPanel >
                                    <Label Height="25" Content="Asset Component Description:" FontWeight="Bold" FontSize="12" Width="209"></Label>
                                <TextBox Height="26"  Name="tbCompDesc1" TabIndex="1" Width="353" IsReadOnly="True"  />
                                    <TextBlock Text="
" Height="10"/>
                                    <Label Content="Make and Model No.(Check if same for all)" Margin="50,0,0,0"  FontWeight="Bold" FontSize="12"/>

                                <TextBox Height="26"  Name="tbMkeMdl1" TabIndex="3" Width="259" Padding="0" MinLines="3" IsReadOnly="True" />
                                </WrapPanel>
                                <WrapPanel>
                                    <Label Height="25" Width="209" Content="Component Qty for a Single Asset:" FontWeight="Bold" FontSize="12"></Label>
                                <TextBox Height="26"  Name="tbCompQty1" TabIndex="3" Width="95" Padding="0"  PreviewTextInput="numericTextboxKeyPress" MinLines="4" IsReadOnly="True" />
                                    <Label Height="25" Width="207" Content="Component Value for Single Asset:" FontWeight="Bold" FontSize="12" Margin="50,0,0,0"></Label>
                                <TextBox Height="26"  Name="tbCompAmt1" TabIndex="3" Width="173"  PreviewTextInput="numericTextboxKeyPress" MinLines="5" TextAlignment="Right" IsReadOnly="True" />
                                    <TextBlock Text="
" Height="10"/>
                                </WrapPanel>
                                <WrapPanel>
                                    <Label Content="Depreciation Type:" FontWeight="Bold" Height="26" FontSize="12" Width="209" />
                                <ComboBox FontSize="16" Height="26" Name="cmbDeprtype1" Width="299" SelectionChanged="cmbDeprtype_SelectionChanged" TabIndex="6" IsReadOnly="True" />
                                    <Label Height="25" Width="118" Content=" Depreciation Amt:" FontWeight="Bold" FontSize="12" Margin="50,0,0,0"></Label>
                                <TextBox Height="26"  Name="tbDAmt1" TabIndex="7" Width="135"  PreviewTextInput="numericTextboxKeyPress" TextAlignment="Right" IsReadOnly="True" />

                                    <Label Height="25" Width="119" Content=" Depreciation Rate:" FontWeight="Bold" FontSize="12" Margin="50,0,0,0"></Label>
                                <TextBox Height="26"  Name="tbDRate1" TabIndex="8" Width="94"  PreviewTextInput="numericTextboxKeyPress" TextAlignment="Right" IsReadOnly="True" />

                                </WrapPanel>
                              </StackPanel>
                    </Border>
                </Popup>


Now I Have a Datagrid where I Have Add the mouse Enter Event for the Datagrid Row:

HTML
<DataGrid  Name="dgCompDtl" AlternatingRowremoved="#FFE2BFD0" Height="494" Width="1115" AutoGenerateColumns="False" CanUserAddRows="False"   CanUserResizeColumns="False"  Loaded="dgDisplay_Loaded" FontSize="12" SelectionChanged="dgCompDtl_SelectionChanged">
                                        <DataGrid.ItemContainerStyle>
                                            <Style TargetType="{x:Type DataGridRow}">
                                                <EventSetter Event="Mouse.MouseEnter" Handler="Show_PopupToolTip" />
                                                <EventSetter Event="Mouse.MouseLeave" Handler="Hide_PopupToolTip"/>
                                            </Style>
                                        </DataGrid.ItemContainerStyle>
                                        <DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Component_ID}" Width="50" Header="ID" >
                                                    <DataGridTextColumn.HeaderTemplate >
                                                        <DataTemplate>
                                                            <TextBlock Text="ID" TextWrapping="Wrap" FontWeight="Bold" FontSize="10"/>
                                                        </DataTemplate>
                                                    </DataGridTextColumn.HeaderTemplate>
                                                </DataGridTextColumn>
                                                <DataGridTextColumn Binding="{Binding Component_Desc}" Width="150" Header="Description" >
                                                    <DataGridTextColumn.HeaderTemplate >
                                                        <DataTemplate>
                                                            <TextBlock Text="Description" TextWrapping="Wrap" FontWeight="Bold" FontSize="10"/>
                                                        </DataTemplate>
                                                    </DataGridTextColumn.HeaderTemplate>
                                                </DataGridTextColumn>
                                                <DataGridTextColumn Binding="{Binding Per_Asset_Qty}" Width="75" Header="Per Asset Qty" >
                                                    <DataGridTextColumn.ElementStyle>
                                                        <Style TargetType="TextBlock">
                                                        <Setter Property="HorizontalAlignment" Value="Center" />
                                                        </Style>

                                                    </DataGridTextColumn.ElementStyle>
                                                    <DataGridTextColumn.HeaderTemplate >
                                                        <DataTemplate>
                                                            <TextBlock Text="Per Asset Qty" TextWrapping="Wrap" FontWeight="Bold"  FontSize="10" HorizontalAlignment="Right"/>
                                                        </DataTemplate>
                                                    </DataGridTextColumn.HeaderTemplate>
                                                </DataGridTextColumn>
</DataGrid.Columns>
                                            <DataGrid.Background>
                                                <SolidColorBrush />
                                            </DataGrid.Background>
                                        </DataGrid>



Finally In the code behind I Have this two events Show_PopupToolTip and Hide_PopupToolTip

C#
private void Show_PopupToolTip(object sender, MouseEventArgs e)
     {
object item = dgCompDtl.SelectedItem;
            CompID = (dgCompDtl.SelectedCells[2].Column.GetCellContent(item) as TextBlock).Text;


            foreach (DataRow Dr in DTComp.Rows)
            {
                if (Dr["Component_ID"].ToString() == CompID)
                {
                    /*This are the fields in the pop up which i am filling up from a DatatTable that has the detail data of the Data grid using the ID in the grid and matching it with ID in Table*/
                    tbCompDesc1.Text = Dr["Component_Desc"].ToString();
                    tbCompQty1.Text = Dr["Per_Asset_Qty"].ToString();
                    tbCompAmt1.Text = Dr["Amt"].ToString();
                    cmbDeprtype1.SelectedValue = Dr["DeprCalc"].ToString();
                    tbDRate1.Text = Dr["Rate"].ToString();
                    tbDAmt1.Text = Dr["DeprAmt"].ToString();
                   tbMkeMdl1.Text = Dr["Make_Model_No"].ToString();
                   // ..... etc
                    }
                
                
              
            }
         
            MyToolTip.Placement = PlacementMode.MousePoint;
            MyToolTip.IsOpen = true;
}

   private void Hide_PopupToolTip(object sender, MouseEventArgs e)
        {
            MyToolTip.IsOpen = false;
        }



So the Problem Now I am facing is it doesnt work but I know this is how it suppose to work as i found this soln where it worked but they used a Listview in place of datagrid. I want it to do with a datagrid... Can anyone please help me out
Thanks in Advance
Posted
Updated 29-Sep-14 20:37pm
v3
Add a Solution
Comments
ashok rathod 26-Sep-14 4:00am    
Can you please tell us it is giving any error or so .. because in my case it is working perfectly
mrbonny7 26-Sep-14 4:42am    
There is actually no error given i want it to display the popup on my mouse enter on the row in the datagrid. When I run the code I try it even in the debug mode it doesnt catch the event on mouse enter.

1 solution

I had copied your provided code and tried to run the application.It is showing me the exact as wanted.


1.One more thing for your information 

CompID = (dgCompDtl.SelectedCells[2].Column.GetCellContent(item) as TextBlock).Text;



In your above line you are taking SelectedCells[2] for getting your CompID value which is actually at position no 1 as per your code in xaml so please replace it with 


CompID = (dgCompDtl.SelectedCells[0].Column.GetCellContent(item) as TextBlock).Text;



and try to run the program . Might now your content will get displayed

the code working for me is as follows



Please take one Latest WPF project and then try below things

XML
<Window x:Class="XYZ.Practice.Lesson1Chapter3Practice"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Lesson1Chapter3Practice" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="TextBox">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontSize" Value="20" />
                </Trigger>
            </Style.Triggers>
            <Setter Property="Background" Value="Black" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="BorderBrush" Value="White" />
            <Setter Property="Width" Value="135" />
            <Setter Property="Height" Value="30" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="Background" Value="Black" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Width" Value="135" />
            <Setter Property="Height" Value="33" />
        </Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Black" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Width" Value="135" />
            <Setter Property="Height" Value="30" />
        </Style>
    </Window.Resources>
    <Grid>
        <!--<Label Margin="26,62,126,0" VerticalAlignment="Top">
            High-Contrast Label</Label>
        <TextBox Margin="26,117,126,115">High-Contrast TextBox
        </TextBox>
        <Button Margin="26,0,126,62" VerticalAlignment="Bottom">
            High-Contrast Button</Button>-->
        <DataGrid  Name="dgCompDtl" AlternatingRowremoved="#FFE2BFD0" Height="494" Width="1115" AutoGenerateColumns="False" CanUserAddRows="False"   CanUserResizeColumns="False"  Loaded="dgCompDtl_Loaded" FontSize="12" SelectionChanged="dgCompDtl_SelectionChanged">
            <DataGrid.ItemContainerStyle>
                <Style TargetType="{x:Type DataGridRow}">
                    <EventSetter Event="Mouse.MouseEnter" Handler="Show_PopupToolTip" />
                    <EventSetter Event="Mouse.MouseLeave" Handler="Hide_PopupToolTip"/>
                </Style>
            </DataGrid.ItemContainerStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Component_ID}" Width="50" Header="ID" >
                    <DataGridTextColumn.HeaderTemplate >
                        <DataTemplate>
                            <TextBlock Text="ID" TextWrapping="Wrap" FontWeight="Bold" FontSize="10"/>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>
                <DataGridTextColumn Binding="{Binding Component_Desc}" Width="150" Header="Description" >
                    <DataGridTextColumn.HeaderTemplate >
                        <DataTemplate>
                            <TextBlock Text="Description" TextWrapping="Wrap" FontWeight="Bold" FontSize="10"/>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>
                <DataGridTextColumn Binding="{Binding Per_Asset_Qty}" Width="75" Header="Per Asset Qty" >
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                        </Style>

                    </DataGridTextColumn.ElementStyle>
                    <DataGridTextColumn.HeaderTemplate >
                        <DataTemplate>
                            <TextBlock Text="Per Asset Qty" TextWrapping="Wrap" FontWeight="Bold"  FontSize="10" HorizontalAlignment="Right"/>
                        </DataTemplate>
                    </DataGridTextColumn.HeaderTemplate>
                </DataGridTextColumn>
            </DataGrid.Columns>
            <DataGrid.Background>
                <SolidColorBrush />
            </DataGrid.Background>
        </DataGrid>
        <Popup  Height="Auto" Width="Auto" Name="MyToolTip" StaysOpen="True" AllowsTransparency="True"  >
            <Border BorderThickness="2" removed="BlanchedAlmond" >
                <StackPanel Margin="30"  Orientation="Horizontal">

                    <WrapPanel >
                        <Label Height="25" Content="Asset Component Description:" FontWeight="Bold" FontSize="12" Width="209"></Label>
                        <TextBox Height="26"  Name="tbCompDesc1" TabIndex="1" Width="353" IsReadOnly="True"  />
                        <TextBlock Text="
" Height="10"/>
                        <Label Content="Make and Model No.(Check if same for all)" Margin="50,0,0,0"  FontWeight="Bold" FontSize="12"/>

                        <TextBox Height="26"  Name="tbMkeMdl1" TabIndex="3" Width="259" Padding="0" MinLines="3" IsReadOnly="True" />
                    </WrapPanel>
                    <WrapPanel>
                        <Label Height="25" Width="209" Content="Component Qty for a Single Asset:" FontWeight="Bold" FontSize="12"></Label>
                        <TextBox Height="26"  Name="tbCompQty1" TabIndex="3" Width="95" Padding="0"   MinLines="4" IsReadOnly="True" />
                        <Label Height="25" Width="207" Content="Component Value for Single Asset:" FontWeight="Bold" FontSize="12" Margin="50,0,0,0"></Label>
                        <TextBox Height="26"  Name="tbCompAmt1" TabIndex="3" Width="173"  MinLines="5" TextAlignment="Right" IsReadOnly="True" />
                        <TextBlock Text="
" Height="10"/>
                    </WrapPanel>
                    <WrapPanel>
                        <Label Content="Depreciation Type:" FontWeight="Bold" Height="26" FontSize="12" Width="209" />
                        <ComboBox FontSize="16" Height="26" Name="cmbDeprtype1" Width="299" TabIndex="6" IsReadOnly="True" />
                        <Label Height="25" Width="118" Content=" Depreciation Amt:" FontWeight="Bold" FontSize="12" Margin="50,0,0,0"></Label>
                        <TextBox Height="26"  Name="tbDAmt1" TabIndex="7" Width="135"   TextAlignment="Right" IsReadOnly="True" />

                        <Label Height="25" Width="119" Content=" Depreciation Rate:" FontWeight="Bold" FontSize="12" Margin="50,0,0,0"></Label>
                        <TextBox Height="26"  Name="tbDRate1" TabIndex="8" Width="94"   TextAlignment="Right" IsReadOnly="True" />

                    </WrapPanel>
                </StackPanel>
            </Border>
        </Popup>
    </Grid>
</Window>



///xaml.cs

C#
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace XYZ.Practice
{
    /// <summary>
    /// Interaction logic for Lesson1Chapter3Practice.xaml
    /// </summary>
    public partial class Lesson1Chapter3Practice : Window
    {
        DataTable DTComp = new DataTable();
        public Lesson1Chapter3Practice()
        {
            InitializeComponent();
            DTComp.Columns.Add("Component_ID");
            DTComp.Columns.Add("Component_Desc");
            DTComp.Columns.Add("Per_Asset_Qty");
            DTComp.Columns.Add("Amt");
            DTComp.Columns.Add("Rate");
            DTComp.Columns.Add("DeprAmt");
            DTComp.Columns.Add("Make_Model_No");

            DTComp.Rows.Add("1", "Component_Desc", "Per_Asset_Qty", "Amt", "Rate", "Make_Model_No");
            DTComp.AcceptChanges();
            dgCompDtl.ItemsSource = DTComp.DefaultView;
            dgCompDtl.SelectedIndex = 0;
        }

        private void Show_PopupToolTip(object sender, MouseEventArgs e)
        {
            object item = dgCompDtl.SelectedItem;
            string CompID = (dgCompDtl.SelectedCells[0].Column.GetCellContent(item) as TextBlock).Text;


            foreach (DataRow Dr in DTComp.Rows)
            {
                if (Dr["Component_ID"].ToString() == CompID)
                {
                    /*This are the fields in the pop up which i am filling up from a DatatTable that has the detail data of the Data grid using the ID in the grid and matching it with ID in Table*/
                    tbCompDesc1.Text = Dr["Component_Desc"].ToString();
                    tbCompQty1.Text = Dr["Per_Asset_Qty"].ToString();
                    tbCompAmt1.Text = Dr["Amt"].ToString();
                    //cmbDeprtype1.SelectedValue = Dr["DeprCalc"].ToString();
                    tbDRate1.Text = Dr["Rate"].ToString();
                    tbDAmt1.Text = Dr["DeprAmt"].ToString();
                    tbMkeMdl1.Text = Dr["Make_Model_No"].ToString();
                    // ..... etc
                }



            }

            MyToolTip.Placement = PlacementMode.MousePoint;
            MyToolTip.IsOpen = true;
        }

        private void Hide_PopupToolTip(object sender, MouseEventArgs e)
        {
            MyToolTip.IsOpen = false;
        }

        private void dgCompDtl_Loaded(object sender, RoutedEventArgs e)
        {

        }

        private void dgCompDtl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {

        }

    }
}


during your code copy i came some error related to xaml like below

removed="BlanchedAlmond"


AlternatingRowremoved="#FFE2BFD0"


I had changed them respectively.
 
Share this answer
 
Posted
Updated 25-Sep-14 23:11pm
v4
Comments
mrbonny7 26-Sep-14 4:40am    
yes you are right but actually there are two button fields in the datagrid 'edit' n 'delete' in the beginning whichI omitted here so I forgot to make the required changes here... but more or less other than few extra fields which i omitted her everything is same. Is there any limitation or size limit of the popup.. because the popup actually has lots of data to be displayed.. it would be too long code so i omitted here and shortened the the no. of data fields
ashok rathod 26-Sep-14 5:12am    
i had checked with above updated code and it is working for me.
mrbonny7 30-Sep-14 3:27am    
I have found the issue but yet couldn't solve it. You are right my code works and the code u removed as they gave errors those are the problems. I am actually using Mahapps controls in VS 2010. when I include the references of Mahapps to give the modern windows 8 metro look to my Application I need to add its references in App.Xaml after which all the normal controls inherit the styles and properties of Metro UI. As a result u across these properties
removed="BlanchedAlmond"
AlternatingRowremoved="#FFE2BFD0"
Which r actually properties from metro UI. so now I need to use the metro looks as its pretty cool but I also need to make this mouseenter popup work.. Do you have any idea how this two might work together???
Thanx for your help.
mrbonny7 26-Sep-14 5:15am    
I Havethe Datagrid in a page and not in a window directly. I have a mainwindow which has a frame. The frame contains all the pages. So one such page has this data grid. So is that supposed to matter with the output of the popup?
mrbonny7 26-Sep-14 5:47am    
i tried your code Copied the Exact same code given by you In a window. But still it did not work.. Its getting strange Why isn't it working with me?? What is the datagrid you are using??
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
WPF datagrid row double click event
Auto scroll behaviour along with selection in WPF datagrid
Problems with scrollbars in WPF datagrid.
How to set focus on new row after TAB pressed in the last row in C# WPF datagrid?
How to insert or add new row to datagrid with animation in WPF ?
How do I add new row in datagrid in WPF?
WPF Datagrid cannot select rows with mouse click
WPF DataGridTextColumn or DataGridTemplateColumn - Text Entered In Row/Cell
I am trying to show popup in ASP.NET from server
WPF data grid and using binding group to validate multiple rows

Advertise
Privacy
Cookies
Terms of Use
Last Updated 26 Sep 2014
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900