Convert Figma logo to code with AI

fluentribbon logoFluent.Ribbon

WPF Ribbon control like in Office

2,658
527
2,658
13

Top Related Projects

Shared Controlz for WPF and ... more

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

Google's Material Design in XAML & WPF, for C# & VB.Net.

All the controls missing in WPF. Over 1 million downloads.

28,322

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

Contains some simple and commonly used WPF controls

Quick Overview

Fluent.Ribbon is an open-source WPF Ribbon control library that implements Microsoft's Fluent UI design guidelines. It provides a rich set of controls and styles to create modern, Office-like user interfaces for Windows desktop applications.

Pros

  • Implements Microsoft's Fluent UI design, providing a familiar and professional look
  • Extensive set of customizable ribbon controls and components
  • Active development and community support
  • Compatible with .NET Framework and .NET Core/5+

Cons

  • Steeper learning curve compared to standard WPF controls
  • May require more resources than simpler UI frameworks
  • Limited to Windows desktop applications (WPF)

Code Examples

  1. Creating a basic Ribbon window:
<Fluent:RibbonWindow x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Fluent="urn:fluent-ribbon"
        Title="My Ribbon App" Height="450" Width="800">
    <Fluent:Ribbon>
        <!-- Ribbon content goes here -->
    </Fluent:Ribbon>
</Fluent:RibbonWindow>
  1. Adding a Ribbon Tab with a Group and Button:
<Fluent:Ribbon>
    <Fluent:RibbonTabItem Header="Home">
        <Fluent:RibbonGroupBox Header="Actions">
            <Fluent:Button Header="Click Me"
                           LargeIcon="/Images/myicon.png"
                           Click="Button_Click"/>
        </Fluent:RibbonGroupBox>
    </Fluent:RibbonTabItem>
</Fluent:Ribbon>
  1. Implementing a Quick Access Toolbar:
<Fluent:Ribbon>
    <Fluent:Ribbon.QuickAccessItems>
        <Fluent:QuickAccessMenuItem Target="{Binding ElementName=SaveButton}"/>
        <Fluent:QuickAccessMenuItem Target="{Binding ElementName=UndoButton}"/>
    </Fluent:Ribbon.QuickAccessItems>
    <!-- Ribbon content -->
</Fluent:Ribbon>

Getting Started

  1. Install the Fluent.Ribbon NuGet package:

    Install-Package Fluent.Ribbon
    
  2. Add the Fluent.Ribbon namespace to your XAML:

    xmlns:Fluent="urn:fluent-ribbon"
    
  3. Replace your main window with a RibbonWindow:

    <Fluent:RibbonWindow ...>
        <Fluent:Ribbon>
            <!-- Add your ribbon content here -->
        </Fluent:Ribbon>
    </Fluent:RibbonWindow>
    
  4. Start adding Ribbon components like tabs, groups, and buttons to create your UI.

Competitor Comparisons

Shared Controlz for WPF and ... more

Pros of ControlzEx

  • More focused and lightweight library, providing specific controls and utilities
  • Easier to integrate into existing projects due to its modular nature
  • Actively maintained with regular updates and bug fixes

Cons of ControlzEx

  • Less comprehensive feature set compared to Fluent.Ribbon
  • May require additional libraries or custom development for advanced UI scenarios
  • Smaller community and fewer resources available online

Code Comparison

ControlzEx:

<controls:WindowChrome.WindowChrome>
    <controls:WindowChrome GlassFrameThickness="1" />
</controls:WindowChrome.WindowChrome>

Fluent.Ribbon:

<Fluent:RibbonWindow x:Class="MainWindow"
    xmlns:Fluent="urn:fluent-ribbon">
    <Fluent:Ribbon>
        <!-- Ribbon content -->
    </Fluent:Ribbon>
</Fluent:RibbonWindow>

ControlzEx focuses on providing enhanced window chrome and controls, while Fluent.Ribbon offers a complete Ribbon UI implementation. ControlzEx is more suitable for projects requiring specific UI enhancements, whereas Fluent.Ribbon is better for applications needing a full Ribbon interface. The choice between the two depends on the project's requirements and the desired level of UI customization.

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

Pros of MahApps.Metro

  • Offers a wider range of UI controls and styles beyond just ribbon interfaces
  • Provides a more comprehensive Metro/Modern UI styling for entire applications
  • Includes additional features like flyouts, dialogs, and custom window chrome

Cons of MahApps.Metro

  • Less focused on ribbon-specific functionality compared to Fluent.Ribbon
  • May have a steeper learning curve due to its broader scope
  • Potentially larger footprint in terms of resources and dependencies

Code Comparison

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
    <Controls:MetroTabControl>
        <Controls:MetroTabItem Header="Tab 1">
            <!-- Content -->
        </Controls:MetroTabItem>
    </Controls:MetroTabControl>
</Controls:MetroWindow>

Fluent.Ribbon:

<Fluent:RibbonWindow x:Class="MainWindow"
    xmlns:Fluent="urn:fluent-ribbon">
    <Fluent:Ribbon>
        <Fluent:RibbonTabItem Header="Tab 1">
            <!-- Content -->
        </Fluent:RibbonTabItem>
    </Fluent:Ribbon>
</Fluent:RibbonWindow>

Both libraries offer XAML-based controls for enhancing WPF applications, but MahApps.Metro provides a broader set of UI elements and styles, while Fluent.Ribbon focuses specifically on implementing Microsoft's Fluent UI (formerly Ribbon UI) design.

Google's Material Design in XAML & WPF, for C# & VB.Net.

Pros of MaterialDesignInXamlToolkit

  • Offers a comprehensive Material Design implementation for WPF
  • Provides a wider range of UI components and controls
  • Actively maintained with frequent updates and community support

Cons of MaterialDesignInXamlToolkit

  • Steeper learning curve due to its extensive feature set
  • May require more resources and potentially impact performance in large applications
  • Less focused on ribbon-specific functionality

Code Comparison

MaterialDesignInXamlToolkit:

<materialDesign:Card Padding="32" Margin="16">
    <TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
        Hello World
    </TextBlock>
</materialDesign:Card>

Fluent.Ribbon:

<Fluent:Ribbon>
    <Fluent:RibbonTabItem Header="Home">
        <Fluent:RibbonGroupBox Header="Group">
            <Fluent:Button Header="Hello World" />
        </Fluent:RibbonGroupBox>
    </Fluent:RibbonTabItem>
</Fluent:Ribbon>

MaterialDesignInXamlToolkit focuses on providing a wide range of Material Design components, while Fluent.Ribbon specializes in creating Office-like ribbon interfaces. The code examples demonstrate the different approaches: MaterialDesignInXamlToolkit uses custom controls for Material Design elements, while Fluent.Ribbon provides specific ribbon-related components.

All the controls missing in WPF. Over 1 million downloads.

Pros of WPF Toolkit

  • Broader range of controls and components, offering more comprehensive UI solutions
  • Longer history and established presence in the WPF ecosystem
  • Regular updates and active community support

Cons of WPF Toolkit

  • Larger footprint and potentially higher resource usage
  • Steeper learning curve due to the extensive feature set
  • Some components may require a commercial license for use

Code Comparison

Fluent.Ribbon:

<Fluent:Ribbon>
    <Fluent:RibbonTabItem Header="Home">
        <Fluent:RibbonGroupBox Header="Group">
            <Fluent:Button Header="Button" />
        </Fluent:RibbonGroupBox>
    </Fluent:RibbonTabItem>
</Fluent:Ribbon>

WPF Toolkit:

<xctk:Ribbon>
    <xctk:RibbonTab Header="Home">
        <xctk:RibbonGroup Header="Group">
            <xctk:RibbonButton Label="Button" />
        </xctk:RibbonGroup>
    </xctk:RibbonTab>
</xctk:Ribbon>

Both libraries provide similar ribbon implementations, but WPF Toolkit offers a wider range of additional controls beyond just ribbon functionality. Fluent.Ribbon focuses specifically on providing a robust ribbon control, while WPF Toolkit aims to be a more comprehensive UI toolkit for WPF applications.

28,322

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

Pros of Avalonia

  • Cross-platform support for Windows, macOS, Linux, iOS, Android, and WebAssembly
  • Modern, flexible UI framework with XAML-based design
  • Active development and growing community

Cons of Avalonia

  • Steeper learning curve for developers new to XAML-based frameworks
  • Smaller ecosystem compared to more established UI frameworks

Code Comparison

Avalonia:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Avalonia Example">
    <Button Content="Click me!" />
</Window>

Fluent.Ribbon:

<ribbon:RibbonWindow x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:ribbon="urn:fluent-ribbon"
        Title="Fluent.Ribbon Example">
    <ribbon:Ribbon>
        <ribbon:RibbonTabItem Header="Home" />
    </ribbon:Ribbon>
</ribbon:RibbonWindow>

Avalonia offers a more versatile, cross-platform solution for modern UI development, while Fluent.Ribbon focuses specifically on implementing the Fluent design language for WPF applications. Avalonia's broader scope and platform support make it suitable for a wider range of projects, but it may require more initial setup and learning. Fluent.Ribbon provides a more specialized, ready-to-use solution for creating Office-style ribbon interfaces in WPF applications.

Contains some simple and commonly used WPF controls

Pros of HandyControl

  • Offers a wider range of UI controls and components
  • Provides more customization options for themes and styles
  • Includes built-in support for multiple languages

Cons of HandyControl

  • Less focused on the Fluent Design System
  • May have a steeper learning curve due to its extensive feature set
  • Documentation is not as comprehensive as Fluent.Ribbon's

Code Comparison

HandyControl:

<hc:Window x:Class="MainWindow"
           xmlns:hc="https://handyorg.github.io/handycontrol">
    <hc:SimplePanel>
        <hc:Button Content="Click Me" Style="{StaticResource ButtonPrimary}"/>
    </hc:SimplePanel>
</hc:Window>

Fluent.Ribbon:

<Fluent:RibbonWindow x:Class="MainWindow"
                     xmlns:Fluent="urn:fluent-ribbon">
    <Fluent:Ribbon>
        <Fluent:RibbonTabItem Header="Home">
            <Fluent:RibbonGroupBox Header="Group">
                <Fluent:Button Header="Click Me"/>
            </Fluent:RibbonGroupBox>
        </Fluent:RibbonTabItem>
    </Fluent:Ribbon>
</Fluent:RibbonWindow>

This comparison highlights the different approaches of the two libraries. HandyControl offers a broader set of controls with more customization options, while Fluent.Ribbon focuses specifically on implementing the Fluent Design System with a ribbon-style interface.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Fluent.Ribbon

Banner

Fluent.Ribbon is a library that implements an Office-like user interface for the Windows Presentation Foundation (WPF). It provides controls such as RibbonTabControl, Backstage, Gallery, QuickAccessToolbar, ScreenTip and so on.

Twitter

Build status (master) Build status (develop) Tests (develop)

Downloads Nuget Nuget (pre) Release

Issues Issues

License

Showcase

Documentation

Visit the documentation.
Almost all features are shown in the showcase application.
The showcase application is included with every release, so you can download stable versions from releases and preview versions from CI artifacts.
If you think there is something missing in the showcase application feel free to create an issue for that.

To be more familiar with the Ribbon concept see msdn article.

History & roadmap

A history of changes is maintained in the Changelog. The roadmap is done by milestones.

If you feel lack of some important features feel free to use issues to create an issue/feature request.

Access to preview versions

You can access preview versions through the AppVeyor nuget feed.

What you can do to help us

  • We are accepting pull requests, so you are very welcome to create one
  • Fix some bugs
  • Help us translating
  • Help us updating the documentation

Development requirements

  • .NET SDK 8.0.401 or later
  • An IDE that supports the required .NET SDK (for example Rider 2024.1, Visual Studio 2022 (17.10) or later)

Designer issues

If you have issues using the designer inside of Visual Studio you can try the following things:

  • Clear %LOCALAPPDATA%\Microsoft\VisualStudio\[VERSION]\Designer\ShadowCache or %LOCALAPPDATA%\Microsoft\WDExpress\[VERSION]\Designer\ShadowCache where [VERSION] has to be changed according to your version of Visual Studio
  • Clear the .vs folder in your development folder

If none of that helps feel free to report an issue here.

Formatting settings that have to be used

  • For general formatting you have to use editorconfig (should work out of the box with Visual Studio 2019)
  • XAML
    • Position each attribute on a separate line
      • Position first attribute on same line as start tag

Awesome tools which Fluent.Ribbon can use

ReSharper logo

Licence

MIT License (MIT)


This project was previously hosted on CodePlex.