Cinta WPF, cambie el contenido principal cuando se selecciona ribbontab

Question

Me gustaría cambiar el contenido de la superficie principal (el material debajo de la cinta) en una aplicación WPF cuando se hace clic en una pestaña de cinta. Estoy usando la cinta de la oficina, no es que importe mucho. Entonces, ¿qué control de contenedor de WPF debería usar y cómo lo haría? ¿Debería tener varios controles con visibilidad oculta, o qué? No soy un experto en WPF, así que necesito un poco de inspiración.

Answer 1

Prólogo diciendo que dudo que esta sea la mejor manera de hacerlo.

Ésta es mi estilo para RibbonTab notar IsSelected está obligado a IsSelected en el modelo de vista

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

Este es el código de vista del modelo

public bool IsSelected 
    { 
     get 
     { 
      return _isSelected; 
     } 

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

En el constructor de la TabViewModel tomo un parámetro para el ViewModel del contenido

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

    private ISelectedContentTab _selectedContent; 

Luego utilicé un ItemsCon trol para visualizar el contenido seleccionado en mi xaml

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

Y el ContentControlTemplate que tengo es

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

También asegúrese de que tiene una DataTemplate señalando su contenido a una vista

Espero que esto ayude.

Answer 2

Sé que este es un hilo más antiguo, pero he tenido un problema con esto y no he encontrado ninguna ayuda de vb.net, pero he descubierto una solución por mi cuenta ... así que aquí está:

Proporcione un nombre a su RibbonTab para que pueda manejarlo en el código de detrás. Sé que hay múltiples formas de agregar vistas y controles, pero esto es lo que hice ... Simplemente agregué una nueva grilla para mi vista dentro de la Grilla principal después de la Cinta. es decir:

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

A continuación, el código subyacente (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

supongo que es una forma más sencilla de hacerlo. Lo he hecho así:

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

Y en su código detrás:

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

La idea es tener un contenido por debajo de la cinta apiladas en capas, (como en Photoshop o cualquier otro editor gráfico) y muestra solo la capa que necesitas en este momento. Sólo unirse Visibility de la capa de IsSelected propiedad de la ficha deseada

MainGrid aquí es un contenedor de capas (que son demasiado 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> 

... y no es necesario ningún código en absoluto !

P.S.Oh, se me olvida que tiene que declarar BooleanToVisibilityConverter en recursos del curso