How to start using Ribbons in WPF

Question

I tried referencing the System.Windows.Controls.Ribbon, the toolbox tab does not show up. If I right-click a tab and click show all, the tab is there, but controls aren't light up. I can add a tab and controls related manually, but after adding the ribbon, things like quickaccesstoolbar and menuitem does not work properly - they are being treated as tabs for some reason. Control groups don't work as well. Simply nothing works as it's supposed to.

I have tried editing XAML directly. It fails in the same manner as using the designer.

The tutorials online are either outdated, for a paid control suite, or simply don't work.

I don't want to use mark-up solutions like http://www.codeproject.com/Articles/364272/Easily-Add-a-Ribbon-into-a-WinForms-Application-Cs , I want something that works in a designer -- Is that too much to ask? If so I'll gladly go back to winforms.

If you work with ribbons, how did you do it? This question seems simple, but after digging for hours I still don't have an answer.

I'm an individual developer, making an open source, free software. As a student I really can't afford 1000$ control suites. I use VS2013 community, I tried using 2015 instead, but all the problems above are the same.

Answer 1

Add this reference:

and this namespace in the XAML file:

and try working with this code example:

 <DockPanel>
    <Ribbon DockPanel.Dock="Top" Margin="0,-22,0,0">  
        <Ribbon.ApplicationMenu>
            <RibbonApplicationMenu SmallImageSource="Images/list.png">
                <RibbonApplicationMenu.AuxiliaryPaneContent>
                    <RibbonGallery ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <RibbonGalleryCategory MaxColumnCount="1">
                            <RibbonGalleryItem
                            x:Name="GalleryItem1" Content="Application menu content" 
                            MouseOverBackground="Transparent"
                            MouseOverBorderBrush="Transparent"
                            CheckedBackground="Transparent"
                            CheckedBorderBrush="Transparent"
                            />
                            <RibbonGalleryItem>
                                <Hyperlink x:Name="hl1" Click="hl1_Click">
                                    <Run Text="http://www.bing.com"/>
                                </Hyperlink>
                            </RibbonGalleryItem>
                        </RibbonGalleryCategory>
                    </RibbonGallery>
                </RibbonApplicationMenu.AuxiliaryPaneContent>
                <RibbonApplicationMenuItem x:Name="menuItem1" Header="Add"
                    ImageSource="Images/add.png"/>
                <RibbonApplicationMenuItem x:Name="menuItem2" Header="Settings"
                    ImageSource="Images/system_preferences.png"/>
            <RibbonApplicationMenu>
        </Ribbon.ApplicationMenu>
        <RibbonTab x:Name="rbnTab1" Header="Tab1">
            <RibbonGroup x:Name="rbnGr1" Header="General">
                <RibbonButton x:Name="btnRibbon1" Label="Save"
                    LargeImageSource="Images/filesave.png"/>
                <RibbonButton x:Name="btnRibbon2" Label="Open"
                    LargeImageSource="Images/load.png"/>
            </RibbonGroup>
            <RibbonGroup x:Name="rbnGr2" Header="New group">
                <RibbonButton x:Name="btnRibbon3" Label="Font"
                    LargeImageSource="Images/fonts.png"/>
                <RibbonButton x:Name="btnRibbon4" Label="Delete"
                    LargeImageSource="Images/recycle_bin.png"/>
            </RibbonGroup>
        </RibbonTab>
        <RibbonTab x:Name="rbnTab2" Header="Tab2">
            <RibbonGroup x:Name="rbnGr3" Header="Other Group">
                <RibbonButton x:Name="btnRibbon5" Label="Play"
                    LargeImageSource="Images/play.png"/>
                <RibbonButton x:Name="btnRibbon6" Label="List"
                    LargeImageSource="Images/kmenuedit.png"/>
            </RibbonGroup>
            <RibbonGroup x:Name="rbnGr4" Header="What a group">
                <RibbonButton x:Name="btnRibbon7" Label="Sleep"
                    LargeImageSource="Images/icon_sleep.png"/>
                <RibbonButton x:Name="btnRibbon8" Label="Add"
                    LargeImageSource="Images/add.png"/>
            </RibbonGroup>
        </RibbonTab>
    </Ribbon>

    <Grid>
        <!-- add your content here-->

    </Grid>
</DockPanel>

You can remove the <Ribbon.ApplicationMenu> if you don't like it by addin this property Visibility="Collapsed"

<Ribbon.ApplicationMenu>
    <RibbonApplicationMenu Visibility="Collapsed">
    </RibbonApplicationMenu>
</Ribbon.ApplicationMenu>