列表与关联的详细信息框GUI

Question

我在C＃/ WPF工作，我正在尝试开发一个具有以下布局的Window：

您的想法是单击数据网格中的每个项目，并在数据网格下方的控件中查看该项目的相关详细信息。我只是不确定什么样的控制将容纳扩展的细节。真的我的问题是关于如何实现这种UI的选项，因为我是WPF的新手。

Answer 1

一个简洁而且相当简单的解决方案是拥有两个独立的视图。一个嵌入另一个。列出项目的网格是您的主视图。详细信息面板是嵌入在第一个视图中的第二个视图。

要传达选择的项目以及应显示哪些详细信息，您正在使用绑定。在显示您正在使用DataContext的详细信息的面板上，并将其绑定到网格上选定的项目。并且，在网格上，要传达选择了哪个项目，您正在使用SelectedValue。

下面的一些示例应该可以让您了解视图之间的关系。

<Window
 ...
xmlns:View="clr-namespace:SampleProject.View"
 ...
/>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    ...
    <!-- Let's assume that your second view is defined in the View folder -->
    <View:DetailsView DataContext="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

    <DataGrid ItemsSource="{Binding Items, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"
              SelectedValue="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}" >
    ...

Items是您要在DataGrid中显示的产品的集合。它应该在主视图的ViewModel中实现。 SelectedItem是ViewModel上的属性。

请注意，示例只是为了让您了解解决方案的结构可能是什么，但它远非完整的解决方案。不过，希望它能帮助您了解如何继续您的项目。

要点是面板之间的通信是通过使用绑定到DataContext（在DetailsView上）和到SelectedValue（在网格上）来完成的。