Drop Down Menu Styling

[Frankie]

Hello,

I am trying to add a drop shadow to the Tab Control DropDownMenu. Currently, I am applying the drop shadow effect to the outermost border within "Telerik_Windows_Controls_TabControl:DropDownMenu" Control Template. The only way I have been able to make the effect visible is by increasing the margins around the containing grid. The problem with this is the margins now push the border/dropdownmenu away from the DropDownMenuButton, so it appears to be floating on its own. Applying a RenderTransform to compensate for the shift only cuts off the drop shadow effect. I have attached an image demonstrating this behavior.

<ControlTemplate TargetType="{x:Type Telerik_Windows_Controls_TabControl:DropDownMenu}">
    <Grid x:Name="PopupContentElement"
          Margin="40,0,40,80"
          RenderTransformOrigin="0,0">
        <Grid.RenderTransform>
            <TranslateTransform X="-40" />
        </Grid.RenderTransform>
        <Border BorderBrush="#FF848484"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="White">
            <Border.Effect>
                <DropShadowEffect BlurRadius="40"
                                  Color="Black"
                                  Direction="0"
                                  Opacity="0.85"
                                  RenderingBias="Quality"
                                  ShadowDepth="0" />
            </Border.Effect>

Any suggestions how to achieve the drop shadow effect without destroying the layout?

Thanks,
Frankie

[Kiril Stanoev]

Hello Frankie,

 Why don't you try setting only the Right and Bottom margins. This will eliminate the need of TranslateTransform:

<ControlTemplate
        TargetType="{x:Type Telerik_Windows_Controls_TabControl:DropDownMenu}">
    <Grid>
        <Border Margin="0 0 40 40" Background="White" CornerRadius="75">
            <Border.Effect>
                <DropShadowEffect BlurRadius="50" Color="Black"
                        Opacity="0.85" RenderingBias="Quality"
                        ShadowDepth="0" />
            </Border.Effect>
        </Border>
        <Border Margin="0 0 40 40"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}">
            <Border BorderBrush="#FF848484"
                    BorderThickness="0,2,0,0">
                <ItemsPresenter
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Border>
        </Border>
        <Rectangle x:Name="BorderMaskElement" Fill="Transparent"
                HorizontalAlignment="Left" VerticalAlignment="Top" />
    </Grid>
</ControlTemplate>

Best wishes,
Kiril Stanoev
the Telerik team

[Frankie]

Hi Kiril,

Thanks for the reply. This is pretty close to what I was attempting to create. Part of the reason I was trying to use a TranslateTransform was to achieve an equal shadow around the sides and bottom of the DropDownMenu, as depicted in the attached file. How would I go about styling the DropDownMenu to create this kind of shadow?

Thanks,
Frankie

[Kiril Stanoev]

Hello Frankie,

 Unfortunately this is a limitation of the DropDownMenu. The only partial workaround is the one suggested in the previous replies. Sorry for the inconvenience caused.

Greetings,
Kiril Stanoev
the Telerik team