Microsoft Ribbon for WPF: how to optimize space usage?

608 views Asked by At

I'm using Ribbon from RibbonControlsLibrary.dll 4.0.0.11019, .NET 4.0, C#, WPF. It can be downloaded with a free samples here: http://www.microsoft.com/en-us/download/details.aspx?id=11877

I have a problem of space usage in my Ribbon.

In a RibbonGroup of my Ribbon I have pretty much buttons that are separated by RibbonSeparator (see the picture below). I know it's better to use multiple RibbonGroup's instead, but for specific reason I can't do that. When I resize my Ribbon, the default Ribbon layout makes buttons smaller. At some moment group collapses to a single button. The problem is that the moment of collapse comes too early. I would like some of my buttons to become still smaller. That is critical, because some of my clients might have small monitors.

Just to show how it happens, I changed all the images of my buttons to a sample image, and all the letters in buttons to "t": enter image description here

The picture shows the moment of collapse for my RibbonGroup. If I shorten my window even a little bit more, RibbonGroup collapses. It's easy to see that many of buttons still could hide their text, or some of the icons could become smaller.

I tried to use RibbonGroup.GroupSizeDefinitions property to set all the possible variants for buttons sizes:

    int groupItemsCount = group.Items.Count;
    group.GroupSizeDefinitions.Clear();

    // Fully expanded definition
    var expandedDefinition = new RibbonGroupSizeDefinition();
    for (int i = 0; i < groupItemsCount; i++)
    {
        expandedDefinition.ControlSizeDefinitions.Add(new RibbonControlSizeDefinition {
            ImageSize = RibbonImageSize.Large,
            IsLabelVisible = true
        });
    }
    group.GroupSizeDefinitions.Add(expandedDefinition);

    // Buttons of Ribbon gradually lose label and have small image
    for (int i = groupItemsCount - 1; i >= 0; i--)
    {
        var def = new RibbonGroupSizeDefinition();
        for (int j = 0; j < groupItemsCount; j++)
        {
            if (j >= i)
            {
                def.ControlSizeDefinitions.Add(new RibbonControlSizeDefinition
                {
                    ImageSize = RibbonImageSize.Small,
                    IsLabelVisible = false
                });
            }
            else
            {
                def.ControlSizeDefinitions.Add(new RibbonControlSizeDefinition
                {
                    ImageSize = RibbonImageSize.Large,
                    IsLabelVisible = true
                });
            }
        }
        group.GroupSizeDefinitions.Add(def);
    }

    // Collapsed definition
    group.GroupSizeDefinitions.Add(new RibbonGroupSizeDefinition { IsCollapsed = true });

Then with resizing window, buttons become smaller from right to left. Here is how the same Ribbon of the same size looks then: enter image description here

But window resizing naturally slows down, and sometimes Ribbon resizing crashes: at some moment buttons stop changing their size after Ribbon resizing.

So finally, how could I make my Ribbon use the available space optimally? Of course, the preferred variant is the default Ribbon layout behavior, but how can I tell Ribbon that it's allowed to hide text labels and make smaller images for all the buttons?

0

There are 0 answers