Question

I’m having massive issues with the WPF ribbon. Here’s a bit of Ribbon code. (I’m using System.Windows.Controls.Ribbon), all of this inside a RibbonWindow on .NET 4.5/VS2012.

<Ribbon VerticalAlignment="Top" Height="Auto" HorizontalAlignment="Stretch">
    <RibbonTab Header="Home" Height="Auto" VerticalAlignment="Top">
        <RibbonGroup Header="Save/Load" Height="Auto" Margin="0"
            VerticalAlignment="Top" Width="Auto">
            <Grid HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Button x:Name="cmdLoadImage" Click="cmdLoadImage_Click"
                    Margin="10,10,10,10" Grid.Column="0">
                    <Image Source="Images\load-icon.png" />
                </Button>
        </RibbonGroup>
    </RibbonTab>
</Ribbon>

Point 1-2 are bugs.

1. I can’t change the height of the Ribbon, despite changing the VerticalAlignment properties of the RibbonTab and RibbonGroup to Stretch. The visual height remains the same.
2. Changing the Button to a RibbonButton vanishes the image inside it, while keeping it at Button has visual repercussions.
3. How do I make the Ribbon span the window as in MS Office? The ApplicationMenu going to the top, and so on?

Edit: A free, alternate ribbon control library for WPF will be appreciated. I want to use it commercially.

Answer 1

For the first question: sorry to disappoint you Microsoft Ribbon have fixed height so you cant change it.

As for the second question: you should use LargeImageSource and SmallImageSource instead of put the image into RibboButton.

Your third question is not obvious enough, But if you mean that you want to join the ApplicationMenu to window title this is the answer: you have to change your window type to RibbonWindow:

<RibbonWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</RibbonWindow>

and in window code behind:

public partial class MainWindow : RibbonWindow
{
}

your design have some mistakes lets fix it.

first of all you have to put the ribbon in grid:

<RibbonWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Ribbon Focusable="False" Height="138" Name="MainRibbon"
            VerticalAlignment="Top">
            <RibbonTab Header="Home" IsSelected="True" KeyTip="H">
                <RibbonGroup Header="Tools" KeyTip="T">
                    <RibbonButton Click="btnSave_Click" ToolTipTitle=""
                        ToolTipDescription="" Name="btnSave"
                        LargeImageSource="..\..\Images\RibbonIcons\Save.png"
                        Label="Save" KeyTip="S"/>
                </RibbonGroup>
            </RibbonTab>
        </Ribbon>
    </Grid>
</RibbonWindow>

Note: you have to set LargeImageSource property To appear the RibbonButton correctly.

Good luck.