Multiple grids in one area

Question

I'm currently creating a WPF application, using C# and XAML in Visual Studios 2010.

I have a master grid. In that master grid I have a group bar which you can select different items. Depending on what you select, the middle of the master grid can be totally different. What I was wondering is, what's the best way to program the middle part?

Right now, I have it set up in such a way that everything in the middle is dynamically programed in C#, and everything on the outside is programmed in XAML.

In C# I programmed: for each group bar item, there is a grid that goes with it (so that different content can be displayed on it). Each grid is a child of the master grid. Each grid is visible or hidden when necessary. Is this the best way to approach this?

The best example of this is in Outlook 2007, where you have your group bar on the right hand side. When you select different items on the group bar (mail, calendar, tasks) the right of the group bar completely changes.

Answer 1

The easy way to do this in WPF is to define DataTemplates for each of your "middle" sections.

Using the Outlook example, you might have a MessageCollection class that stores a list of messages, an EventCollection class that stores a list of calendar events, and a TaskCollection class that stores a list of tasks.

In your "middle" area you would simply have a single ContentPresenter whose Content would be set to a MessageCollection, EventCollection, or TaskCollection. Presumably this would be done using a binding to a view model property.

Here is how it might look:

<Window ...>
  <Grid>
    <!-- group bar area -->
    ...

    <!-- "middle" area -->
    <ContentPresenter Grid.Row="1" Grid.Column="1"
                      Content="{Binding SelectedCollection}" />
  </Grid>
</Window>

Now you create a DataTemplate for each of the collection types, for example:

<DataTemplate TargetType="{x:Type my:MessageCollection}">
  <Grid>
    ... put the XAML for displaying mailbox contents here ...
  </Grid>
</DataTemplate>

<DataTemplate TargetType="{x:Type my:EventsCollection}">
  <Grid>
    ... put the XAML for displaying a calendar here ...
  </Grid>
</DataTemplate>

<DataTemplate TargetType="{x:Type my:TasksCollection}">
  <Grid>
    ... put the XAML for displaying a to-do list here ...
  </Grid>
</DataTemplate>

With this setup, all you have to do to switch the inner grid is to set your "SelectedCollection" property in your view model to a different collection type.