WPF Farbband, zum Hauptbereich ändern, wenn RibbonTab ausgewählt ist

Question

Ich möchte den Inhalt der Hauptfläche ändern (das Zeug unter dem Band selbst) in einer WPF-Anwendung, wenn eine Band Registerkarte geklickt wird. Ich bin mit dem Büro Band, nicht, daß die Dinge viel. Also die WPF-Containersteuer soll ich verwenden, und wie würde ich es tun? Sollte ich nur verschiedene Kontrollen mit Sicht versteckt, oder was. Ich bin kein Experte WPF so dass ich ein wenig Inspiration brauchen.

Answer 1

Ill Vorwort mit den Worten: Ich bezweifle, dass dies der beste Weg, dies zu tun.

Das ist mein Stil für RibbonTab bemerken IsSelected zu IsSelected in dem View-Modell gebunden ist

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

Dies ist View-Modell Code

    public bool IsSelected
    {
        get
        {
            return _isSelected;
        }

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

Im Konstruktor für die TabViewModel nehme ich einen Parameter für das Ansichtsmodell des Inhalts

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

    private ISelectedContentTab _selectedContent;

Dann habe ich eine Item den ausgewählten Inhalt in meiner XAML anzuzeigen

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

Und die ContentControlTemplate ich habe, ist

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

Auch stellen Sie sicher, Sie haben eine Datatemplate zeigen Sie Ihre Inhalte auf einen Blick

Hope, das hilft.

Answer 2

Die Idee ist unterhalb Band in Schichten gestapelt zu haben, (wie in Photoshop oder einem anderen grafischen Editor) und zeigen nur Ebene, die Sie in diesem Moment brauchen. bindet nur Visibility Ihre Schicht Eigenschaft der gewünschten Registerkarte IsSelected

Maingrid hier ist ein Container für die Schichten (die Grids auch):

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

... und Sie keinen Code benötigen überhaupt nicht!

P. S. Oh, ich habe vergessen Sie BooleanToVisibilityConverter in Ressourcen natürlich zu erklären haben

Answer 3

Ich denke, es ist ein einfacher Weg, es zu tun. Ich habe es so gemacht:

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

Und im Code hinter:

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

Ich weiß, das ist ein älterer Thread, aber ich habe ein Problem mit diesem wurde und haben keine vb.net-Hilfe, aber ich habe eine Lösung auf meine eigene entdeckt ... so ist es hier:

Geben Sie Ihren RibbonTab einen Namen, so dass Sie es in dem Code hinter verarbeiten können. Ich weiß, es gibt mehr Möglichkeiten hinzufügen Ansichten und Kontrollen, aber hier ist das, was ich getan habe ... Ich habe einfach ein neues Raster für meine Ansicht im Haupt Grid nach dem Band. dh:

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

Dann wird der Code-behind (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