WPF ribbon, change main content when ribbontab is selected

Question

I would like to change the content of the main surface (the stuff below the ribbon itself)in a WPF application when a ribbon tab is clicked. I'm using the office ribbon, not that is matters much. So which WPF container control should I use, and how would I do it? Should I just have various controls with visibility hidden, or what. I'm not a WPF expert so I need a little inspiration.

Answer 1

Ill preface by saying I doubt this is the best way to do this.

This is my style for RibbonTab notice IsSelected is bound to IsSelected in The view model

  <!-- RibbonTab -->
        <Style TargetType="{x:Type ribbon:RibbonTab}">
            <Setter Property="ContextualTabGroupHeader" Value="{Binding ContextualTabGroupHeader}" />
            <Setter Property="Header" Value="{Binding Header}" />
            <Setter Property="ItemsSource" Value="{Binding GroupDataCollection}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected}" />
        </Style>

This is view model code

    public bool IsSelected
    {
        get
        {
            return _isSelected;
        }

        set
        {
            if (_isSelected != value)
            {
                _isSelected = value;
                OnPropertyChanged(new PropertyChangedEventArgs("IsSelected"));
            }
        }
    }
    private bool _isSelected;

In the constructor for the TabViewModel I take a parameter for the ViewModel of the content

    public TabData(ISelectedContentTab content)
        : this(content.DisplayName)
    {
        _selectedContent = content;
    }

    private ISelectedContentTab _selectedContent;

Then I used an ItemsControl to display the selected content in my xaml

  <ItemsControl Grid.Row="1" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" 
                  ItemsSource="{Binding ElementName=ribbon,Path=SelectedItems}" 
                  ItemTemplate="{StaticResource ContentControlTemplate}" />

And the ContentControlTemplate I have is

 <DataTemplate x:Key="ContentControlTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <ContentControl Grid.Row="0" VerticalAlignment="Stretch" Height="Auto" VerticalContentAlignment="Stretch" Content="{Binding SelectedContent}" />
            </Grid>
        </DataTemplate>

Also make sure you have a datatemplate pointing your content to a view

Hope this helps.