how create popup info to dispaly related data

Question

Hi All.
I have DataGrid that has context menu to call other form for add related data to selected item. Now I would like to create popup DataGrid in mouseover event on selected DataGrid item to display data that related to it. That gives information for user what data is exists or need to add. If it is possible. How to do it? I will appreciate for sample and detail explanation.

Thanks.

Answer 1

I do a very simple demo which basic functions are implemented , and its demo is like the below picture shown:

The code for xaml is:

 <WrapPanel>  
        <DataGrid x:Name="dataGrid"  
                  Width="450" Height="400"  
                  HorizontalAlignment="Left"  
                  SelectedItem="{Binding SelectedData}"  
                  DataContext="{Binding Mylist}"   
                  ItemsSource="{Binding}"   
                  SelectionUnit="FullRow"   
                  CanUserAddRows="False"  
                  AutoGenerateColumns="False"  
                  >  
            <DataGrid.RowDetailsTemplate>  
                <DataTemplate>  
                    <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10" HorizontalAlignment="Right">  
                        <Popup Name="myPop" IsOpen="True" StaysOpen="False" Width="250" Height="200">  
                            <StackPanel Background="Azure">  
                                <DockPanel>  
                                    <TextBlock Text="Name:"  Width="80" HorizontalAlignment="Left"/>  
                                    <TextBox Text="{Binding ElementName=dataGrid, Path=SelectedItem.Name}"/>  
                                </DockPanel>  
                                <DockPanel>  
                                    <TextBlock Text="Age:" Width="80" HorizontalAlignment="Left"/>  
                                    <TextBox Text="{Binding ElementName=dataGrid, Path=SelectedItem.Age}"/>  
                                </DockPanel>  
                                <DockPanel>  
                                    <TextBlock Text="Email:"  Width="80" HorizontalAlignment="Left"/>  
                                    <TextBox Text="{Binding ElementName=dataGrid, Path=SelectedItem.Email}"/>  
                                </DockPanel>  
                                <DockPanel>  
                                    <TextBlock Text="Pass:"  Width="80" HorizontalAlignment="Left"/>  
                                    <CheckBox IsChecked="{Binding ElementName=dataGrid, Path=SelectedItem.Pass}"/>  
                                </DockPanel>  
                            </StackPanel>  
                        </Popup>  
                    </Border>  
                </DataTemplate>  
            </DataGrid.RowDetailsTemplate>  
            <DataGrid.Columns>  
                <DataGridTextColumn Header="Name" Width="80" Binding="{Binding Name}"/>  
                <DataGridTextColumn Header="Age" Width="50" Binding="{Binding Age}" />  
                <DataGridCheckBoxColumn Header="Pass Exam?" Width="100"   Binding="{Binding Pass}"/>  
                <DataGridHyperlinkColumn Header="Email" Width="150"  Binding="{Binding Email}"/>  
            </DataGrid.Columns>  
        </DataGrid>   
    </WrapPanel>  

The code for cs is:

 public partial class MainWindow : Window  
    {  
        public MainWindow()  
        {  
            InitializeComponent();  
            this.DataContext = new ViewModel();  
        }  
    }  
  
  
    public class Member  
    {  
        public string Name { get; set; }  
        public string Age { get; set; }  
        public bool Pass { get; set; }  
        public Uri Email { get; set; }  
  
    }  
  
    public class ViewModel : INotifyPropertyChanged  
    {  
        public ViewModel()  
        {  
            Mylist.Add(new Member() { Name = "Joe1", Age = "21", Pass = true, Email = new Uri("mailto:Joe1@school.com") });  
            Mylist.Add(new Member() { Name = "Joe2", Age = "22", Pass = false, Email = new Uri("mailto:Joe2@school.com") });  
            Mylist.Add(new Member() { Name = "Joe3", Age = "23", Pass = false, Email = new Uri("mailto:Joe3@school.com") });  
            Mylist.Add(new Member() { Name = "Joe4", Age = "24", Pass = true, Email = new Uri("mailto:Joe4@school.com") });  
        }  
  
  
        Member selectedData = new Member();  
  
        public Member SelectedData  
        {  
            get { return selectedData; }  
            set  
            {  
                selectedData = value;  
                RaisePropertyChanged("SelectedData");  
            }  
        }  
  
        ObservableCollection<Member> _mylist = new ObservableCollection<Member>();  
        public ObservableCollection<Member> Mylist  
        {  
  
            get { return _mylist; }  
            set  
            {  
                _mylist = value;  
                RaisePropertyChanged("Mylist");  
            }  
        }  
  
  
        public event PropertyChangedEventHandler PropertyChanged;  
        public void RaisePropertyChanged(string propertyName)  
        {  
            if (propertyName != null)  
            {  
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));  
            }  
        }  
    }  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.