Ribbon WPF, thay đổi nội dung chính khi ribbontab được chọn

Question

Tôi muốn thay đổi nội dung của bề mặt chính (chính dưới chính ribbon) trong ứng dụng WPF khi nhấn vào tab ribbon. Tôi đang sử dụng ruy-băng văn phòng, điều đó không quan trọng lắm. Vì vậy, WPF container kiểm soát tôi nên sử dụng, và làm thế nào tôi sẽ làm điều đó? Tôi có nên có các điều khiển khác nhau với khả năng hiển thị ẩn hay không. Tôi không phải là một chuyên gia WPF vì vậy tôi cần một chút cảm hứng.

Answer 1

Lời nói đầu của tôi bằng cách nói rằng tôi nghi ngờ đây là cách tốt nhất để thực hiện việc này.

Đây là phong cách của tôi cho RibbonTab nhận thấy IsSelected là ràng buộc để IsSelected trong Mô hình xem

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

Đây là quan điểm mô hình mã

public bool IsSelected 
    { 
     get 
     { 
      return _isSelected; 
     } 

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

Trong constructor cho TabViewModel Tôi lấy một tham số cho ViewModel của nội dung

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

    private ISelectedContentTab _selectedContent; 

Sau đó, tôi đã sử dụng một ItemsCon trol để hiển thị các nội dung được lựa chọn trong XAML của tôi

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

Và ContentControlTemplate tôi có là

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

Ngoài ra hãy chắc chắn rằng bạn có một datatemplate chỉ nội dung của bạn đến một cái nhìn

Hope this helps.

Answer 2

Tôi biết đây là một chủ đề cũ hơn, nhưng tôi đã gặp vấn đề với điều này và không tìm thấy bất kỳ trợ giúp vb.net nào, nhưng tôi đã tự khám phá ra một giải pháp ...

Đặt tên RibbonTab của bạn để bạn có thể xử lý nó trong mã phía sau. Tôi biết có nhiều cách để thêm chế độ xem và điều khiển, nhưng dưới đây là những gì tôi đã làm ... Tôi chỉ cần thêm lưới mới cho chế độ xem của mình trong Lưới chính sau ruy-băng. ví dụ:

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

Sau đó, các mã sau (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

Tôi đoán có một cách đơn giản hơn để làm điều đó. Tôi đã thực hiện nó như thế này:

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

Và trong mã của bạn đằng sau:

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

Ý tưởng là để có nội dung dưới đây ruy băng xếp chồng lên nhau trong lớp, (như trong Photoshop hoặc bất kỳ trình soạn đồ họa khác) và chỉ hiển thị lớp bạn cần thời điểm này. Chỉ cần gắn Visibility của lớp của bạn để IsSelected tài sản của tab mong muốn

MainGrid đây là một container cho các lớp (trong đó có lưới quá):

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

... và bạn không cần bất kỳ mã nào cả !

P.S.Ồ, tôi quên bạn phải khai báo BooleanToVisibilityConverter trong tài nguyên của khóa học