wpf - 当选定的功能区选项卡项目更改时更改 View

Question

我在 MVVM 应用程序中使用 Fluent 功能区。对于每个选项卡项，我关联一个 View 和一个 View 模型(设置一个新的 DataContext)。每次更改所选选项卡项时，如何更改 View 和 View 模型(DataContext)？如果有一个每次选择选项卡项时都会触发的事件，就像 Microsoft Ribbon for WPF 那样，那就太好了。此外，当选定的选项卡更改时，为功能区实例定义的 SelectedTabChanged 事件会触发两次:一次针对旧选项卡，一次针对新选项卡项。我认为这不是一个好的编码实践。

无论如何，请建议我一种在更改所选选项卡项时更改 View 的有效方法。(代码示例或指向一些代码示例的链接)。

谢谢

都铎王朝

Answer 1

至少有一种相当可接受的方法来解决这个问题，而且也非常简单:通过绑定(bind)并为每个 View 使用容器 TabControl 来关联到每个功能区选项卡。

• 将功能区和 TabControl 堆叠在一起。
• 将选项卡控件的 SelectedIndex 属性绑定(bind)到功能区的 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>