依赖注入：将用户控件分配给特定的网格单元

Question

我是 MVVM/WPF 新手，知道如何使用 Grid 和 StackPanel 布局控件。进行类似这样的布局的最佳方法是什么：

-------------------------
|      Navigation       |
-------------------------
|         |             |
| Summary |   Details   |
|         |             |
-------------------------
|      Extra Data       |
-------------------------

一旦我有了布局，如何将正确的视图放入正确的单元格中。每个不同的区域（导航、摘要等）都有自己的 View/ViewModel。

我想到了几种不同的方法，但不确定哪种（如果有的话）最好。

方法一 像这样的嵌入式网格

<Grid>
   <Row>  (Navigation)
   <Row>  
      <Grid>
         <Column>  (Summary)
         <Column>  (Detail)
      </Grid>
   <Row>  (Extra)
</Grid>

需要跨越列，我不确定这是否是好的做法。

方法二嵌入视图

<Grid>
   <Row>  (Navigation)
   <Row>  (Summary/Details defined by a another view containing 2 columns)
   <Row>  (Extra)
</Grid>

对于方法 2，也可以使用 StackPanel 代替 Grid

使用任何一种方法（或其他方法）我如何指定哪个单元格获得什么视图？例如，我在 MainWindowViewModel 中有以下内容：

    public MainWindowViewModel()
    {

        NavigationViewModel navigationViewModel = new NavigationViewModel();
        this.ViewModels.Add(navigationViewModel);

        SummaryViewModel summaryViewModel = new SummaryViewModel ();
        this.ViewModels.Add(summaryViewModel);

        DetailViewModel detailViewModel= new DetailViewModel();
        this.ViewModels.Add(detailViewModel);


        ExtraDataViewModel extraDataViewModel = new ExtraDataViewModel ();
        this.ViewModels.Add(extraDataViewModel);
   }


        private ObservableCollection<ViewModelBase> _viewModels;
        public ObservableCollection<ViewModelBase> ViewModels
        {
            get
            {
                if (_viewModels == null)
                {
                    _viewModels = new ObservableCollection<ViewModelBase>();
                }
                return _viewModels;
            }
        }

在 MainWindowView 我有这个：

<Window.Resources>
    <ResourceDictionary Source="MainWindowResources.xaml" />
</Window.Resources>


<Grid>
    <Grid.RowDefinitions>
       <RowDefinition Height="100" />
       <RowDefinition Height="*" />
       <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <ItemsControl ItemsSource="{Binding ViewModels}" Margin="3" /> 
</Grid>

只是不确定如何利用 ItemsSource 在正确的单元格中指定正确的视图。

Answer 1

Prism 或 Caliburn.Micro 都是构建复合 UI 的绝佳工具。我不会努力自己构建这个功能。

---

更新

如果您不想引入另一个框架，我建议您只使用Grid作为总体布局并将ItemsControls 放入Grid 的单元格中。使用DataTemplate 将您的视图模型与其各自的视图连接起来。

Answer 2

您可以通过多种方式布置主视图，例如使用 DockPanel 或 Grid，就像在您的第一个示例中一样。在这种情况下，您不需要跨列，因为您使用的是嵌套网格，但无论如何跨列是完全可以接受的。

至于您的视图模型，我会将 4 个子视图模型中的每一个都公开为它们自己的单独属性，而不是拥有所有视图模型的集合。这使得在主视图中定位每个子视图变得更加容易。

我会考虑使用 MVVM 框架，例如 Caliburn.Micro，这使得视图组合非常容易。这也将极大地简化一些事情，例如从您的视图中调用视图模型上的动词（方法）。

还有其他框架，例如Prism，它们提供了视图合成的解决方案。