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

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.

wpfxamlribbonsystem.windows.controls.ribbon


Solution 1:[1]

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

Solution 2:[2]

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.

Solution 3:[3]

For prosperity, it's not currently possible. It appears that the RibbonMenuButton uses a private Popup to display the dropdown content.

Source: https://github.com/dotnet/wpf/blob/main/src/Microsoft.DotNet.Wpf/src/System.Windows.Controls.Ribbon/Microsoft/Windows/Controls/Ribbon/RibbonMenuButton.cs Lines 1309 and 1335.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Andy
Solution 3 StayOnTarget

Related Questions