Change view when changing selected ribbon tab

Question

I am using Fluent ribbon in an MVVM application. For each tab element, I map the view and the view model (set a new DataContext). How to change the view and presentation model (DataContext) every time you change the selected tab element? It would be nice to have an event that fires every time a tab element is selected, such as Microsoft Ribbon for WPF. In addition, the SelectedTabChanged event defined for the feed instance fires twice when the selected tab changes: one time for the old tab and one time for the new tab element. I do not think this is a good coding practice.

In any case, please offer me an effective way to change the view when changing the selected tab element (example code or a link to some code examples).

Thank,

Tudor

Answer 1

I see that this is an old question, but I came across this when I was looking for the same thing. Perhaps others may find this answer useful in the future. There is at least one quite acceptable way to solve this problem, which is also quite simple: using bindings and using the container TabControlfor each view to bind to each tab of the ribbon.

• Connect the tape and TabControl.
• SelectedIndex SelectedTabIndex.
• .

:

<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>