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.

Answer 2

The idea is to have content below ribbon stacked in layers, (like in Photoshop or any other graphical editor) and show only layer you need this moment. Just bind Visibility of your layer to IsSelected property of desired tab

MainGrid here is a container for layers (which are Grids too):

    <Grid x:Name="MainGrid">
        <Grid Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=ribbonTab2}">
            <Image x:Name="ImgMain" Source="x.jpg"/>
        </Grid>
        <Grid Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=ribbonTab1}">
            <Image x:Name="ImgXtra" Source="y.jpg"/>
       </Grid>
    </Grid>

Add <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> in resources.

...and you don't need any code at all!