Ruban WPF, modifiez le contenu principal lorsque ribbontab est sélectionné

Question

Je souhaite modifier le contenu de la surface principale (les éléments situés sous le ruban lui-même) dans une application WPF lorsqu'un onglet de ruban est cliqué. J'utilise le ruban de bureau, ce n'est pas grave. Quel contrôle de conteneur WPF dois-je utiliser, et comment le ferais-je? Devrais-je juste avoir différents contrôles avec la visibilité cachée, ou quoi. Je ne suis pas un expert de WPF donc j'ai besoin d'un peu d'inspiration.

Answer 1

Préface en disant je doute que c'est la meilleure façon de le faire.

Ceci est mon style pour RibbonTab un préavis IsSelected est lié à IsSelected dans le modèle de vue

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

Ceci est vue code modèle

public bool IsSelected 
    { 
     get 
     { 
      return _isSelected; 
     } 

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

Dans le constructeur de la TabViewModel je prends un paramètre pour le ViewModel du contenu

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

    private ISelectedContentTab _selectedContent; 

Puis j'ai utilisé un ItemsCon Trol pour afficher le contenu sélectionné dans mon XAML

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

Et le ContentControlTemplate j'est

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

Assurez-vous également que vous avez un DataTemplate pointant votre contenu à une vue

Hope this helps.

Answer 2

Je sais que c'est un thread plus ancien, mais j'ai eu un problème avec cela et je n'ai trouvé aucune aide de vb.net, mais j'ai découvert une solution par moi-même ... alors voici:

Donnez un nom à votre RibbonTab pour pouvoir le gérer dans le code qui se trouve derrière. Je sais qu'il y a plusieurs façons d'ajouter des vues et des contrôles, mais voici ce que j'ai fait ... J'ai simplement ajouté une nouvelle grille pour ma vue dans la Grille principale après le Ruban. à savoir:

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

ensuite le code derrière (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 

Answer 3

Je crois qu'il ya une façon plus simple de le faire. Je l'ai fait comme ceci:

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

Et dans votre code derrière:

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/")); 
    } 

Answer 4

L'idée est d'avoir un contenu en dessous de ruban empilées en couches, (comme dans Photoshop ou tout autre éditeur graphique) et montrer seulement couche vous avez besoin de ce moment. Il suffit de lier Visibility de votre couche à IsSelected propriété de l'onglet souhaité

MainGrid est ici un conteneur pour les couches (qui sont aussi Grids):

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

... et vous n'avez pas besoin de code du tout !

P.S.Oh, j'oublie que vous devez déclarer BooleanToVisibilityConverter dans les ressources bien sûr