Create a dropdown 'panel' area from a WPF ribbon?

2
votes

The WPF ribbon (System.Windows.Controls.Ribbon) includes a number of controls which you can add to your ribbon having "dropdown" style behavior where clicking the control's main button shows you a new area.

Examples: RibbonMenuButton, RibbonSplitButton, RibbonMenuButton, RibbonGallery, etc.

However, as far as I can see all of them are designed to show you a list of things from which the user makes a selection. But instead, is there any way to display a 'panel' area that is non-selectable, upon which other controls could be placed?

As an example, here is a screenshot from MS Outlook:

enter image description here

The upper red area is NOT itself a selection in a list. Instead it has a custom control (the table size-picker thing).

But the blue items ARE selectable items which function like a traditional menu.

Its the red area I'm interested in understanding.

(I don't know if Outlook was coded using the WPF Ribbon, and that doesn't matter at all - I'm just using it as an illustration of what I'm looking for.)

Note - I'm not trying to replicate this Outlook table-picker specifically, its just an example of the ways in which you might use a non-selectable 'panel' area within the dropdown region.

2
wpfxamlribbonsystem.windows.controls.ribbon
I was able to replace the Template of a RibbonGalleryItem with a ControlTemplate containing StackPanel with labels and checkboxes. I could interact with the checkboxes without the RibbonGalleryItem being "selected"; if I put IsHitTestVisible="False" on the Labels, I could click on anything in the stackpanel and it wouldn't "select" the RibbonGalleryItem. You can replace the Content instead of the Template, but then even if the Content is opaque, you still get the selection decoration around it on mouseover. Not attractive IMO. – 15ee8f99-57ff-4f92-890c-b56153
Sadly, it seems ribbon is simply not designed to support this UI. – steve

2 Answers

1
votes

Microsoft RibbonMenuButton / RibbonSplitButton wont support custom controls in dropdown.

Even if we manage to do that by changing the Content of RibbonMenuItem / RibbonGalleryItem, we will still get selection decoration around those controls on mouse hover

Best way is to use the combination of RibbonToggleButton and Popup Control as below

Then you can place whatever custom control you want inside that popup Control

<StackPanel Orientation="Vertical">
<RibbonToggleButton
            x:Name="yAxis"
            Label="Y Axis"
            SmallImageSource="..\Images\ChartYAxis16.png"
            LargeImageSource="..\Images\ChartYAxis32.png"
            RibbonTwoLineText.HasTwoLines="True"
            RibbonTwoLineText.PathData="M 0 0 L 2.5 3 L 5 0 Z">
        </RibbonToggleButton>
        <Popup
            IsOpen="{Binding IsChecked, ElementName=yAxis}">
            <mycontrols:AnyControl/>
        </Popup>
    </StackPanel>

enter image description here

Of course you may need to handle the dropdown closing programmatically by unchecking the togglebutton whenever user clicks outside the togglebutton or dropdown popup

0
votes

You can put anything you like inside a ribbonmenubutton.

For example:

    <Ribbon>
        <RibbonMenuButton Label="Button One">
            <Grid Height="100" Width="200">
                <TextBlock VerticalAlignment="Top" Text="AAAA"/>
                <TextBlock VerticalAlignment="Bottom" Text="ZZZZ"/>
            </Grid>
        </RibbonMenuButton>
    </Ribbon>

You'd want to extract and change the ribbonmenubutton template to avoid the gap at the left.