如何在网格单击时显示子窗口（使用 mvvm 方法）

Question

我是一个 c# silverlight 初学者，我必须使用 mvvm 方法来完成我的任务。 我已经创建了一个如下所示的 GUI：

<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>

现在我必须通过单击“sso”来创建一个子窗口，然后单击标题下方的“program2”另一个子窗口（@98​​7654325@）。这个子窗口将包含一些按钮和文本框也是如此。

我应该在哪里进行更改。我必须使用 Mvvm 方法来这样做。 使用“选择列表”是一种正确的方法，如果我使用“选择列表”，那么如何绑定它以及如何将它与 Model.cs 和 ViewModel.cs 链接？有人可以帮我提供一段 ViewModel.cs 和 Model.cs 和 View.xaml 的代码吗？ 会有很大的帮助。谢谢

Answer 1

编辑

编写了一个小型演示应用程序 - Download

---

第一种方法 - 绑定到DataGrid.SelectedItem

在 ViewModel 中放置一个名为 SelectedProgr 的属性

然后在 XAML 中将 DataGrid 的 SelectedItem 属性绑定到它：

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

然后创建一个依赖于SelectedProgr的自定义视图

例如：

<Label Text={Binding Path=SelectedProgr}>

---

第二种方法 - 使用RowDetailsTemplate

来自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>