Question

我在MVVM应用程序中使用Fluent功能区。对于每个选项卡项，我将视图与视图模型相关联（设置新的DataContext）。每次更改选定的选项卡项时，如何更改视图和视图模型（DataContext）？每次选择一个标签项时都会触发一个事件，比如用于WPF的Microsoft Ribbon。此外，为选定的选项卡更改时，为功能区实例定义的SelectedTabChanged事件将被触发两次：旧选项卡一次，新选项卡项一次。我不认为这是一个很好的编码实践。

无论如何，请建议我在更改所选标签项时更改视图的有效方法。（代码示例或链接到某些代码示例）。

谢谢，

铎

Answer 1

我认为这是一个老问题，但我在谷歌上搜索同样的事情时偶然发现了这个问题。也许其他人可以在将来找到这个答案。至少有一种相当可接受的解决方法，这也很简单：通过绑定和使用容器TabControl为每个视图关联到每个功能区选项卡。

将功能区和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>

选定功能区选项卡项更改时更改视图

1 个答案: