c# - 如何在网格单击时显示子窗口(使用 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”单击标题下方(SerialNumber)来创建一个子窗口。这个子窗口将包含一些按钮和文本框好。

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

Answer 1

编辑

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





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

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

然后在 XAML 中将 DataGrid 的 SelectedItem 属性绑定(bind)到它:

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

然后创建一个依赖于 SelectedProgr 的自定义 View 。

例如:

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