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

我在MVVM应用程序中使用Fluent功能区。对于每个选项卡项目，我都关联一个视图和一个视图模型（设置一个新的DataContext）。每当选择的选项卡项目更改时，如何更改视图和视图模型（DataContext）？如果每次选择标签项目时都会触发一个事件，例如Microsoft的WPF所提供的功能区，那就太好了。此外，为所选功能区实例定义的SelectedTabChanged事件在更改选定选项卡时会触发两次：一次用于旧选项卡，一次用于新选项卡项目。我认为这不是一个好的编码习惯。当选定的功能区选项卡项更改时更改视图

无论如何，请在更改选定选项卡项目时更改视图的有效方法（代码示例或指向一些代码示例的链接）。

感谢，

铎

来源

2010-08-13 Tudor Cret

我看到这是一个老问题，但在谷歌上搜索了同样的事情，我在此绊倒了。也许其他人可以在未来找到这个有用的答案。至少有一种相当可接受的方法来解决这个问题，这也很简单：通过绑定和使用容器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>

来源

2014-03-26 18:45:23 Leandro

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

回答

相关问题