How to use this component

The easiest way to use this control is to use the nuget package manager and download RibbonControl.

1. Create a project which will make use of the control.
2. Add the following lines in your App.xaml :

<Application.Styles>
  ... 
  <StyleInclude Source="avares://AvaloniaRibbon/Config/RibbonTemplates.xaml"/>
  <StyleInclude Source="avares://AvaloniaRibbon/Config/RibbonThemeColor.xaml"/>
</Application.Styles>

3. In your MainWindow.xaml, add the following lines in the top part of the file :

<Window xmlns="https://github.com/avaloniaui"
        ...
        xmlns:rc="clr-namespace:AvaloniaRibbon.Views;assembly=AvaloniaRibbon"
        ...
        HasSystemDecorations="False">

4. Put the outer control which will contain everything (ribbon + all the content of your app since RibbonWindow redefine the entire window) :

<rc:RibbonWindow>
</rc:RibbonWindow>

5. Add the RibbonControl properly spoken :

<rc:RibbonWindow>
  <rc:RibbonControl>
  </rc:RibbonControl>
</rc:RibbonWindow>

6. Now, you can add as many tab as you want (here, 2 tabs named Fileans Edit) :

<rc:RibbonWindow>
  <rc:RibbonControl>
    <rc:RibbonTab Header="File">


    </rc:RibbonTab>
    <rc:RibbonTab Header="Edit">


    </rc:RibbonTab>
  </rc:RibbonControl>
</rc:RibbonWindow>

7. In each RibbonTab you can directly add buttons or RibbonTabGroup to organize the presentations. Note that RibbonTabGroup has an incorporated button (this button is meant to call dialog box to configure related stuff concerning this group). Note also that you can use a standard button but there is already styled buttons made for you : RibbonButton and RibbonLinearButton. The first one is meant to be used in a horizontal StackPanel and the lase ont in a vertical StackPanel. This are only suggestion, you're free to use the panel and the controls you want. Here is a full example : (this makes uses of some pictures (.png), make sure you got some in the right folder (suggested folder : /Assets/RibbonIcons but once again, you can do as you wish)) :

<rc:RibbonWindow>
    <rc:RibbonControl>
      <rc:RibbonTab Header="File">
        <StackPanel Orientation="Horizontal">
          <rc:RibbonTabGroup Text="Un premier groupe">
            <StackPanel Orientation="Horizontal">
              <rc:RibbonButton Text="Test3" IconPath="/Assets/RibbonIcons/settings.png" />
              <rc:RibbonButton Text="Test4" IconPath="/Assets/RibbonIcons/corner.png" />
              <rc:RibbonButton Text="Test5" IconPath="/Assets/RibbonIcons/chevron.png" />
              <rc:RibbonButton Text="Test6" IconPath="/Assets/RibbonIcons/settings.png" />
            </StackPanel>
          </rc:RibbonTabGroup>
          <rc:RibbonTabGroup Text="Paragraphe">
            <StackPanel Orientation="Vertical">
              <!-- Maximum 3 buttons per vertical stackpanel -->
              <rc:RibbonLinearButton Text="Reproduire la mise en forme" IconPath="/Assets/RibbonIcons/corner.png" />
              <rc:RibbonLinearButton Text="Test8" IconPath="/Assets/RibbonIcons/settings.png" />
              <rc:RibbonLinearButton Text="Test9" IconPath="/Assets/RibbonIcons/settings.png" />
            </StackPanel>
            <v:RibbonComboButton IconPath="/Assets/RibbonIcons/settings.png" Text="Coller">
                  <ComboBoxItem>ksdlfml</ComboBoxItem>
                  <ComboBoxItem>ksdnvbl</ComboBoxItem>  
                </v:RibbonComboButton>
                <StackPanel>
                  <v:RibbonSmallButtonHGroup>
                    <v:RibbonSmallButton IconPath="/Assets/RibbonIcons/settings.png" ToolTip.Tip="A small tooltip" />
                    <v:RibbonSmallButton IconPath="/Assets/RibbonIcons/settings.png"  />
                    <v:RibbonSmallButton IconPath="/Assets/RibbonIcons/settings.png"  />
                  </v:RibbonSmallButtonHGroup>  
                </StackPanel>
          </rc:RibbonTabGroup>
        </StackPanel>
      </rc:RibbonTab>
      <rc:RibbonTab Header="Edit">
        <StackPanel Orientation="Horizontal">
          <rc:RibbonTabGroup Text="Paragraphe">
            <StackPanel Orientation="Horizontal">
              <rc:RibbonButton Text="Test3" IconPath="/Assets/RibbonIcons/favicon.png" />
              <rc:RibbonButton Text="Test4" IconPath="/Assets/RibbonIcons/corner.png" />
              <rc:RibbonButton Text="Test5" IconPath="/Assets/RibbonIcons/favicon.png" />
              <StackPanel Orientation="Vertical">
                <!-- Maximum 3 buttons per vertical stackpanel -->
                <rc:RibbonLinearButton Text="Reproduire la mise en forme" IconPath="/Assets/RibbonIcons/corner.png" />
                <rc:RibbonLinearButton Text="Test8" IconPath="/Assets/RibbonIcons/settings.png" />
                <rc:RibbonLinearButton Text="Test9" IconPath="/Assets/RibbonIcons/settings.png" />
              </StackPanel>
              <rc:RibbonButton Text="Test6" IconPath="/Assets/RibbonIcons/settings.png" />
            </StackPanel>
          </rc:RibbonTabGroup>
        </StackPanel>
      </rc:RibbonTab>
    </rc:RibbonControl>
  </rc:RibbonWindow>

This gives you this result :

8. As well as the RibbonTabGroup is concerned, RibbonButton and RibbonLinearButton implement the Commandproperty. The basic usage in a MVVM app is as such :

<rc:RibbonButton Text="Test3" IconPath="/Assets/RibbonIcons/favicon.png" Command={Binding myfunction} />

and in your ViewModel associated to your current View :

public void myfunction() 
{
  // What I need to do when the button is clicked !
}

Have fun !