Kolumne: XAML Expertise

XAML-Tipp: WPF – Das Fluent.Ribbon-Menü
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: Das Fluent.Ribbon-Menü“

Die bekannte Ribbon-Bar aus Microsoft Office hat in WPF eine interessante Geschichte hinter sich. Erst war sie .NET-Entwicklern komplett vorenthalten worden, dann veröffentlichte Microsoft eine Library über die ehemalige Open-Source-Plattform Codeplex – nur dass der Code dazu nicht wirklich offengelegt war. Schlussendlich wurde sie ein fester Bestandteil von WPF 4.5.

In der Zwischenzeit hat sich Office und somit auch die Ribbon Bar weiterentwickelt. Bei WPF befinden sich Funktionalität und Design leider noch auf einem älteren Stand. Abhilfe schafft hier das kostenlose Open-Source-Projekt Fluent.Ribbon; es setzt auf die moderne Ribbon-Bar auf, die aus Office 2017 bekannt ist.

WPF: Das Fluent.Ribbon-Menü

Nach der Installation der Library über NuGet muss über die App.xaml das bereitgestellte RessourceDictionary eingebunden werden (Listing 1). Nach dem Einbinden wird vom Hauptfenster die äußere Window-Deklaration durch RibbonWindow ersetzt. Der gewünschte Bereich für das Ribbon wird in RowDefinitions festgelegt. Anschließend wird das Ribbon-Steuerelement für die erste Zeile deklariert. Dazu fügt man das erste RibbonTabItem ein, wie komplett in Listing 2 und Abbildung 1 veranschaulicht. Der erste Start mit Fluent.Ribbon wurde nun bereits gemeistert. Eine ausführliche Dokumentation ist auf der Produktwebseite zu finden.

<Application.Resources>
  <!-- Attach default Theme -->
  <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />
</Application.Resources>
<Fluent:RibbonWindow
  xmlns:Fluent="urn:fluent-ribbon"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Title="MainWindow" Height="350" Width="525">
    <Fluent:RibbonWindow.Resources>
      <Image x:Key="rowBottom" Source="AddRowBottom.png"></Image>
      <Image x:Key="rowChild" Source="AddRowChild.png"></Image>
    </Fluent:RibbonWindow.Resources>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Fluent:Ribbon Grid.Row="0">
        <!--Backstage-->
        <Fluent:Ribbon.Menu>
          <Fluent:Backstage>
          </Fluent:Backstage>
        </Fluent:Ribbon.Menu>

        <!--Tabs-->
          <Fluent:RibbonTabItem Header="Home">
            <Fluent:RibbonGroupBox Header="Group">
              <Fluent:Button Header="Green"
                Icon="{DynamicResource rowBottom}"
                LargeIcon="{DynamicResource rowBottom}" />
              <Fluent:Button Header="Grey" 
                Icon="{DynamicResource rowChild}"
                LargeIcon="{DynamicResource rowChild}" />
            </Fluent:RibbonGroupBox>
          </Fluent:RibbonTabItem>
        </Fluent:Ribbon>

    <Grid Grid.Row="1">
      <TextBlock>My first window containing a Ribbon and something else.</TextBlock>
    </Grid>
  </Grid>
</Fluent:RibbonWindow>
Abb. 1: Die ersten Schritte mit dem Fluent.Ribbon-Menü

Abb. 1: Die ersten Schritte mit dem Fluent.Ribbon-Menü

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -