Ribbon with templates causes transparent background

Question

I have finally managed to template my ribbon and adding everything with databinding. However I have a very ugly "dropdownmenu" which background have become transparent (The shadowing remains though!)

1st of all what is this "dropdownmenu" called? Lastly which properties shall I edit for providing a proper background to this "dropdownmenu"?

Best Regards!

Answer 1

That menu is a drop-down menu of a collapsed group. Collapsed group is a combination of RibbonToggleButton + Popup. In template, the Popup looks like this:

<Popup x:Name="PART_Popup"
                    AllowsTransparency="true"
                    Placement="Bottom"                               
                    PlacementTarget="{Binding ElementName=PART_ToggleButton}"
                    IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                    Focusable="false"
                    PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
    <classic:SystemDropShadowChrome Name="Shdw" 
                                Color="Transparent" 
                                SnapsToDevicePixels="true" 
                                CornerRadius="2" 
                                Focusable="True" 
                                FocusVisualStyle="{x:Null}"
                                controls:KeyTipService.IsKeyTipScope="True"

                                RenderOptions.ClearTypeHint="Enabled"

                                >
        <Grid Name="PopupGrid" Height="{TemplateBinding ActualHeight}" Margin="0,1.5,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" MinHeight="16" />
            </Grid.RowDefinitions>
            <Border Name="PopupBorder" Grid.RowSpan="2"
                Background="{TemplateBinding Background}"
                BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Ribbon.BorderBrush}"
                BorderThickness="1"/>
            <Border Name="PART_HotBackground"
                Background="{TemplateBinding MouseOverBackground}"
                BorderBrush="{TemplateBinding MouseOverBorderBrush}"
                Opacity="0"
                Grid.RowSpan="2"
                CornerRadius="2"
                BorderThickness="1"
                SnapsToDevicePixels="True"/>
            <Border Margin="2,3.5,2,0" Padding="3,0,3,0" x:Name="PART_RibbonControlsHostBorder">
                <Grid>
                    <ItemsPresenter Name="ItemsPresenter" KeyboardNavigation.TabNavigation="Cycle"
                                        KeyboardNavigation.DirectionalNavigation="Cycle"
                                        SnapsToDevicePixels="True"
                                        Grid.IsSharedSizeScope="true"/>
                    <ContentControl Name="TemplateContentControl" Visibility="Collapsed" Focusable="False"/>
                </Grid>
            </Border>
            <Grid Margin="2,0,2,1" Grid.Row="1">
                <ContentPresenter Name="PART_Header"
                                TextElement.Foreground="{StaticResource &#203;}"
                                ContentSource="Header"
                                Margin="2,0,2,0"
                                MaxHeight="15"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"/>
            </Grid>
        </Grid>
    </classic:SystemDropShadowChrome>
</Popup>

As you can see, the Background is inherited from RibbonGroup. So, you have few variants to fix it:

1. Set the Background property for your RibbonGroup that is not transparent
2. Retemplate