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

Question

I am a c# silverlight beginner and i have to use mvvm approach to achieve my task. I have already created a GUI which look like this:

<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:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <vm:ProgramViewModel x:Key="ProgramViewModel"/>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <data:DataGrid Grid.Row="0" x:Name="gridPrograms" AutoGenerateColumns="False" ItemsSource="{Binding Path=Progr}" IsReadOnly="True"  DataContext="{StaticResource ProgramViewModel}" >
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Header="SerialNumber" Binding="{Binding Path=SerialNumber}" Width="2*"></data:DataGridTextColumn>
                <data:DataGridTextColumn Header="FirstName" Binding="{Binding Path=FirstName}" Width="2*"></data:DataGridTextColumn>
                <data:DataGridTextColumn Header="LastName" Binding="{Binding Path=LastName}" Width="3*"></data:DataGridTextColumn>
            </data:DataGrid.Columns>
        </data:DataGrid>
    </Grid>
</UserControl>

Now i have to create a child window by clicking on "sso" and another child window for "program2" click which are just below the heading(SerialNumber).This child window will contain some button and text box as well.

Where should i make change to do so.I have to use Mvvm approach to do so. Is using "selection list" a right approach, If i use "selection list" then how to bind it and how to link it with Model.cs and ViewModel.cs ? Could some one please help me to give piece of codes for ViewModel.cs and Model.cs and View.xaml? Would be a big help. Thanks

Answer 1

Edit

Wrote a small demo app - Download

---

First approach - Bind to DataGrid.SelectedItem

Place a property in the ViewModel called SelectedProgr

then in the XAML bind the DataGrid's SelectedItem property to it:

<DataGrid ItemsSource="{Binding Path=Progr}" 
          ...
          ...
          SelectedItem="{Binding Path=SelectedProgr, Mode=TwoWay}"/>

Afterwards create a custom view that depends on the SelectedProgr

for example:

<Label Text={Binding Path=SelectedProgr}>

---

Second approach - Using RowDetailsTemplate

Example from wpftutorial.net:

<DataGrid ItemsSource="{Binding Progr}">
    <DataGrid.Columns>
       <DataGridTextColumn Header="SerialNumber" Binding="{Binding Path=SerialNumber}" Width="2*"></DataGridTextColumn>
       <DataGridTextColumn Header="FirstName" Binding="{Binding Path=FirstName}" Width="2*"></DataGridTextColumn>
       <DataGridTextColumn Header="LastName" Binding="{Binding Path=LastName}" Width="3*"></DataGridTextColumn>
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <!-- Put here your custom view -->
            <Image Height="100" Source="{Binding Image}" />
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>