Change view when selected ribbon tab item changes

Question

I'm using Fluent ribbon in a MVVM application. For each tab item I associate a view and a view model (set a new DataContext). How can I change the view and the view model (DataContext) each time when the selected tab item is changed ? It would have been nice to have an event that fires each time a tab item is selected, like Microsoft Ribbon for WPF has. Moreover the SelectedTabChanged event defined for a ribbon instance is triggered twice when the selected tab is changed: one time for the old tab and one time for the new tab item. I don't think it's a good coding practice.

Anyway please suggest me an efficient way of changing the view when the selected tab item is changed.(code example or link to some code examples).

Thanks,

Tudor

Answer 1

There is at least one fairly acceptable way to tackle this, which is also quite simple: by means of bindings and using a container TabControl for each view to associate to every ribbon tab.

• Stack together a ribbon and a TabControl.
• Bind the tab control's SelectedIndex property to the ribbon's SelectedTabIndex.
• Hide the headers of all tab items in the tab control.

Code:

<fluent:RibbonWindow
    x:Class="FluentExample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:fluent="clr-namespace:Fluent;assembly=Fluent"
    >
    <DockPanel LastChildFill="True">
        <fluent:Ribbon x:Name="_ribbon" DockPanel.Dock="Top">
            <!-- Ribbon tabs -->
            <fluent:RibbonTabItem Header="Tab #1" />
            <fluent:RibbonTabItem Header="Tab #2" />
        </fluent:Ribbon>

        <!-- Views container -->
        <TabControl
            DockPanel.Dock="Bottom"
            SelectedIndex="{Binding ElementName=_ribbon, Path=SelectedTabIndex}"
            >

            <!-- Hide tab items headers -->
            <TabControl.ItemContainerStyle>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Style>
            </TabControl.ItemContainerStyle>

            <!-- Individual content for each tab go here -->
            <TabItem><TextBlock Text="First Content View (#1)" /></TabItem>
            <TabItem><TextBlock Text="Second Content View (#2)" /></TabItem>
        </TabControl>
    </DockPanel>
</fluent:RibbonWindow>