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.