c# - How to display child window on grid click (using mvvm approach) -

I am starting a C # Silverlight and I have to use the MVVM approach to achieve my work. I have already created a GUI that looks like this:

& lt; UserControl x: class = "DEV_CENTER.MainPage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/ 2006 / xaml "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http: //schemas.openxmlformats .org / markup-compatibility / 2006 "xmlns: vm = "Clr-namespace: DEV_CENTER" xmlns: data = "clr-namespace: System.Windows.Controls; assembly = System.Windows.Controls.Data" mc: Ignorable = "D" D: DesignHite = "300" D: DesignView = "400" & gt; & Lt; UserControl.Resources & gt; & Lt; Vm: ProgramView Model X: Key = "ProgramWellModel" /> & Lt; /UserControl.Resources> & Lt; Grid X: Name = "Layouts" background = "White" & gt; & Lt; Data: Data Grid Grid Rau = "0" x: name = "grid program" automatically generated column = "wrong" item source = "{binding path = projector}" IsReadOnly = "True" DataContext = "{StaticResource ProgramViewModel}" & gt; & Lt; Data: DataGrid.Columns & gt; & Lt; Data: DataGridTextColumn header = "serial number" binding = "{binding path = serial number}" width = "2 *" & gt; & Lt; / Data: Data Grid Text ClauL & gt; & Lt; Data: DataGridTextColumn header = "Firstname" binding = "{binding path = first name}" width = "2 *" & gt; & Lt; / Data: Data Grid Text ClauL & gt; & Lt; Data: DataGridTextColumn header = "last name" binding = "{binding path = last name}" width = "3 *" & gt; & Lt; / Data: DataGrade Text column & gt; & Lt; / Data: DataGrid.Columns & gt; & Lt; / Data: Data grid & gt; & Lt; / Grid & gt; & Lt; / UserControl & gt; Now, by clicking on " sso " and " Program 2 ", you will need to create a hair window by clicking another hair window. Just below the heading ( serial number ). There will also be a few buttons and text boxes in the child window.

Where should I change to do this? I have to use the MVVM approach to do this. Using the correct method of "selection list", How can I bind it if I use "selection list" and how to link it to Model.cs and ViewModel.cs? Can anyone help me give a piece of code for ViewModel.cs and Model.cs and View.xaml? A big help will be thanks

edit

wrote a small demo app -

---

First Way - from

selectedProgr name >

  & lt; DataGrade ItemsSource = "{Binding Path = Projector}" ... ... selected element = "{binding path = selected program, mode = dove}" />   
 Create a custom view later, which depends on  SelectedProgr   
 for example:  
  & Lt; Label text = {binding path = selected page} & gt;   
 
  Another way - using the  Row details template    
 Example:  
  & lt; DataGrid ItemsSource = "{Binding Progr}" & gt; & Lt; DataGrid.Columns & gt; & Lt; DataGridTextColumn header = "serial number" binding = "{binding path = serial number}" width = "2 *" & gt; & Lt; / DataGridTextColumn & gt; & Lt; DataGridTextColumn header = "firstname" binding = "{binding path = first name}" width = "2 *" & gt; & Lt; / DataGridTextColumn & gt; & Lt; DataGridTextColumn header = "last name" binding = "{binding path = last name}" width = "3 *" & gt; & Lt; / DataGridTextColumn & gt; & Lt; /DataGrid.Columns> & Lt; DataGrid.RowDetailsTemplate & gt; & Lt; DataTemplate & gt; & Lt ;! - Insert your custom view here - & gt; & Lt; Image height = "100" source = "{binding image}" /> & Lt; / DataTemplate & gt; & Lt; /DataGrid.RowDetailsTemplate> & Lt; / Data grid & gt;