Dependency Injection: Assigning User Controls to Specific Grid Cells

Question

I am new to MVVM/WPF and know how to use Grid and StackPanel layout controls. What is the best method for doing a layout similar to this:

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

Once I have the layout how do I get the correct views into the correct cells. Each different area (Navigation, Summary, etc.) will have its own View/ViewModel.

I have thought of a couple different methods but not sure which (if any) are best.

Method 1 Imbedded grid like such

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

Would require spanning columns which I am not sure if that is good practice or not.

Method 2 Imbedded View

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

Could also use StackPanel in place of Grid for Method 2

With either method (or something else) how do I specify what cell gets what view? For instance, I have the following in 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;
            }
        }

And in MainWindowView I have this:

<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>

Just not sure how to tap into ItemsSource to specify the correct view in the correct cell.

Answer 1

Either Prism or Caliburn.Micro are really great tools for building composite UIs. I would not make an effort in building this functionality on my own.

---

Update

If you don't want to bring in another framework I would recommend you just use a Gridfor the general layout and put ItemsControls into the cells of the Grid. Use a DataTemplate to connect your view-models with their respective view.

Answer 2

There are several ways that you could layout your main view, using for example a DockPanel, or a Grid, as in your first example. You wouldn't need to span columns in this case, because you are using nested grids, but it is perfectly acceptable to span columns anyway.

As for your view models, I would expose each of the 4 sub view models as their own separate property, rather than have a collection of all view models. This makes it easier to position each sub view in the main view.

I would look into using an MVVM framework, such as Caliburn.Micro, which makes view composition very easy. This will also hugely simplify things such as invoking verbs (methods) on your view models from your view.

There are other frameworks too, such as Prism, which offer solutions for view composition.