列表与相关细节框GUI

Question

我在C＃/ WPF的工作，我试图开发具有以下布局的窗口：

的想法是，你点击每个项目datagrid并在数据网格下面的控件中查看该项目的相关详细信息。我只是不确定哪种控制能够容纳扩展细节。真的，我的问题是围绕如何实现这种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（在网格上）完成的。