如何在网格点击上显示子窗口（使用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>

现在我必须通过点击＆＃34; sso＆＃34;来创建子窗口。和＃34; program2＆＃34;的另一个子窗口单击标题下方的SerialNumber）。此子窗口还包含一些按钮和文本框。

我应该在哪里进行更改。我必须使用Mvvm方法来执行此操作。 正在使用＆＃34;选择列表＆＃34;一个正确的方法，如果我使用＆＃34;选择列表＆＃34;然后如何绑定它以及如何将它与Model.cs和ViewModel.cs链接？有人可以帮我提供一些ViewModel.cs和Model.cs以及View.xaml的代码吗？ 会是一个很大的帮助。感谢

Answer 1

修改

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

---

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

在名为SelectedProgr

的ViewModel中放置一个属性

然后在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>