WPF功能区,选择ribbontab时更改主要内容

时间:2009-12-04 12:26:20

标签: .net wpf xaml ribbon

当单击功能区选项卡时,我想在WPF应用程序中更改主表面(功能区本身下方的内容)的内容。我正在使用办公室功能区,不是那么重要。那么我应该使用哪个WPF容器控件,我该怎么做呢?我应该只是隐藏可见性的各种控件,或者是什么。我不是WPF专家,所以我需要一些灵感。

4 个答案:

答案 0 :(得分:11)

我在前言中说我怀疑这是最好的方法。

这是我的RibbonTab样式通知IsSelected绑定到视图模型中的IsSelected

  <!-- RibbonTab -->
        <Style TargetType="{x:Type ribbon:RibbonTab}">
            <Setter Property="ContextualTabGroupHeader" Value="{Binding ContextualTabGroupHeader}" />
            <Setter Property="Header" Value="{Binding Header}" />
            <Setter Property="ItemsSource" Value="{Binding GroupDataCollection}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected}" />
        </Style>

这是视图模型代码

    public bool IsSelected
    {
        get
        {
            return _isSelected;
        }

        set
        {
            if (_isSelected != value)
            {
                _isSelected = value;
                OnPropertyChanged(new PropertyChangedEventArgs("IsSelected"));
            }
        }
    }
    private bool _isSelected;

在TabViewModel的构造函数中,我为内容的ViewModel取一个参数

    public TabData(ISelectedContentTab content)
        : this(content.DisplayName)
    {
        _selectedContent = content;
    }

    private ISelectedContentTab _selectedContent;

然后我使用ItemsControl在我的xaml中显示所选内容

  <ItemsControl Grid.Row="1" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" 
                  ItemsSource="{Binding ElementName=ribbon,Path=SelectedItems}" 
                  ItemTemplate="{StaticResource ContentControlTemplate}" />

我的ContentControlTemplate是

 <DataTemplate x:Key="ContentControlTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <ContentControl Grid.Row="0" VerticalAlignment="Stretch" Height="Auto" VerticalContentAlignment="Stretch" Content="{Binding SelectedContent}" />
            </Grid>
        </DataTemplate>

还要确保您有一个datatemplate将您的内容指向视图

希望这有帮助。

答案 1 :(得分:7)

我们的想法是将功能区下方的内容堆叠在图层中(如在Photoshop或任何其他图形编辑器中)并仅显示您需要此时刻的图层。只需将图层的Visibility绑定到所需标签的IsSelected属性

即可

这里的MainGrid是图层的容器(也是网格):

    <Grid x:Name="MainGrid">
        <Grid Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=ribbonTab2}">
            <Image x:Name="ImgMain" Source="x.jpg"/>
        </Grid>
        <Grid Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=ribbonTab1}">
            <Image x:Name="ImgXtra" Source="y.jpg"/>
       </Grid>
    </Grid>

...而且您根本不需要任何代码!

P.S。哦,我忘了你必须在资源中声明BooleanToVisibilityConverter

答案 2 :(得分:2)

我想有更简单的方法可以做到这一点。我这样做了:

<Frame NavigationUIVisibility="Hidden" x:Name="FrmMainFrame" DockPanel.Dock="Bottom"/>

在您的代码中:

mainWindowView.RibMain.SelectionChanged += RibMain_SelectionChanged;

void RibMain_SelectionChanged(object sender,  System.Windows.Controls.SelectionChangedEventArgs e)
    {
        var tab = this.mainWindowView.RibMain.SelectedItem as RibbonTab;
        if (tab.Header.Equals("Explorer"))
        {
            mainWindowView.FrmMainFrame.Navigate(explorerController.View());
        }
        else
            mainWindowView.FrmMainFrame.NavigationService.Navigate(new Uri("http://www.google.com/"));
    }

答案 3 :(得分:1)

我知道这是一个较旧的主题,但是我一直遇到这个问题并且没有找到任何vb.net帮助,但我自己发现了一个解决方案...所以这里是:< / p>

为您的RibbonTab提供一个名称,以便您可以在后面的代码中处理它。 我知道有多种方法可以添加视图和控件,但这是我做的... 我只是在功能区之后在主网格中为我的视图添加了一个新网格。即:

<r:RibbonWindow>
  <Grid>
    <r:Ribbon>
      <r:RibbonTab Name="Tab1" Header="Home">
        <r:RibbonGroup Name="Group1">
          <r:RibbonButton LargeImageSource="images\icon.png" Label="Click Me"/>
        </r:RibbonGroup>
      </r:RibbonTab>
      <r:RibbonTab Name="Tab2" Header="Other Tab">
        <r:RibbonGroup Name="Group2">
          <r:RibbonButton LargeImageSource="images\icon.png" Label="Click Me"/>
        </r:RibbonGroup>
      </r:RibbonTab>
    </r:Ribbon>
    <Grid Name="Tab1RTB" Grid.Row="1" Visibility="Hidden">
      <RichTextBox Margin="5" BorderBrush="LightGray" BorderThickness="1"/>
    </Grid>
    <Grid Name="Tab2RTB" Grid.Row="1" Visibility="Hidden">
      <RichTextBox Margin="5" BorderBrush="LightGray" BorderThickness="1"/>
    </Grid>
  </Grid>
</r:RibbonWindow>

然后是代码(VB.NET)

Private Sub TabChanged(sender As System.Object, e As SelectionChangedEventArgs) Handles ribbonHome.SelectionChanged
  If Tab1.IsSelected = True Then
    Tab1RTB.Visibility = Windows.Visibility.Visible
    Tab2RTB.Visibility = Windows.Visibility.Collapsed
  ElseIf Tab2.IsSelected = True
    Tab1RTB.Visibility = Windows.Visibility.Collapsed
    Tab2RTB.Visibility = Windows.Visibility.Visible
  Else
    Tab1RTB.Visibility = Windows.Visibility.Collapsed
    Tab2RTB.Visibility = Windows.Visibility.Collapsed
  End If
End Sub