Question

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

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

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

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

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

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

需要生成列，我不确定这是不是很好的做法。

方法2 嵌入式视图

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

也可以使用StackPanel代替方法2的网格

使用任何一种方法（或其他方法）如何指定哪个单元格获取哪个视图？例如，我在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

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

对于您的视图模型，我会将4个子视图模型中的每一个作为它们自己的独立属性公开，而不是拥有所有视图模型的集合。这样可以更轻松地在主视图中定位每个子视图。

我会考虑使用MVVM框架，例如Caliburn.Micro，这使得视图合成非常简单。这也将大大简化诸如从视图中调用视图模型上的动词（方法）之类的事情。

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

Answer 2

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

<强>更新

如果您不想引入其他框架，我建议您只使用Grid进行常规布局，并将ItemsControls放入Grid的单元格中。使用DataTemplate将视图模型与各自的视图相关联。

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

2 个答案: