Customizing the drop down menu

[TAlecksen]

I am using the ribbon control with a few split buttons. I have been able to incorporate buttons within the drop down menu, but am now trying to figure out how to add a shadow to the menu itself.

I tried overriding the style but could not find the inherited item that the ribbon uses for dropdown panels. Any help would be appreciated!

[batzen]

The immediate content of the Popup is of type ResizeableContentControl.
See

Fluent.Ribbon/Fluent.Ribbon/Themes/Controls/SplitButton.xaml

Line 114 in ba9a2e2

<Popup x:Name="PART_Popup"

[TAlecksen]

Thank you for the quick response!

I am now trying to determine how to customize that panel and the properties don't seem to be modifying it. Here is what I am currently trying:

<Fluent:Ribbon.Resources>
    <Style TargetType="{x:Type Fluent:ResizeableContentControl}">
        <Setter Property="Background" Value="Red" />
    </Style>
</Fluent:Ribbon.Resources>

This does not seem to affect the background color.

[batzen]

Sorry. My answer was a bit misleading.
If you want to use a style with ResizeableContentControl that has a background you also need to provide a template in that style as ResizeableContentControl inherits from ContentControl and does not have a dedicated template that would support background colors etc.

Please be aware that ResizeableContentControl is also used in ComboBox, DropDownButton, InRibbonGallery and in MenuItem.

[TAlecksen]

Excellent, I greatly appreciate your help with this. I am somewhat new to WPF and learning how to use templates. I am able to use them for buttons, etc.. however, for something like the ResizableContentControl, where would the template be referenced?

[batzen]

Sorry again.
I totally forgot that ResizeableContentControl already has a template, otherwise it wouldn't be resizable ;-)
You can find the full template at https://github.com/fluentribbon/Fluent.Ribbon/blob/develop/Fluent.Ribbon/Themes/Controls/ResizeableContentControl.xaml

I just made changes to the style and template so it's way easier for you to customize the appearance.
For your use case adding the following, as an example, to your style should be enough:

<Setter Property="Padding" Value="0 0 8 8" />
<Setter Property="Effect">
    <Setter.Value>
        <DropShadowEffect BlurRadius="5" Opacity="0.4"/>
    </Setter.Value>
</Setter>

[TAlecksen]

OK, I believe I am almost there but still can't get it to work. Also, I donated to your project to say thanks for making such a great control and taking the time to help others, like myself. I plan to do more as I can!

I added a resource dictionary to my project and added the template you referenced. From the main window, I referenced that file along with the default template (maybe this is where it's getting off?):

 <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />
                <ResourceDictionary Source="/<myProject>;component/ResourceDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

I then added a resizable control inside a drop down button, like this:

      <Fluent:SplitButton>
          <Fluent:ResizeableContentControl>
              <More Stuff>
          </Fluent:ResizeableContentControl>                                             
      </Fluent:SplitButton>

Everything compiles, however the changes I make in the template are still not showing in the drop down menu.

Thanks again!

[batzen]

You don't have to put ResizeableContentControl into SplitButton as ResizeableContentControl is already used there.
If you use it as the content of SplitButton the result becomes SplitButton->Popup->ResizeableContentControl->ResizeableContentControl, so you would nest ResizeableContentControl inside ResizeableContentControl which is not what you want to happen. ;-)

What you should put into your resource dictionary is:

<Style TargetType="{x:Type Fluent:ResizeableContentControl}"
       BasedOn="{StaticResource Fluent.Ribbon.Styles.ResizeableContentControl}">
    <Setter Property="Padding" Value="0 0 8 8" />
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="5" Opacity="0.4"/>
        </Setter.Value>
    </Setter>
</Style>

And you should use Fluent.Ribbon version 11.0.0-rc0264 (which i just pushed to nuget).

[batzen]

And thanks for donating :-)

[TAlecksen]

Excellent, I will try that as soon as version 11 shows up (not showing as of now).