This is a migrated thread and some comments may be shown as answers.

Problem with DropShadowEffect

1 Answer 84 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Cheng Lim Sek
Top achievements
Rank 1
Cheng Lim Sek asked on 12 Nov 2009, 07:04 AM
Hi,

I having a problem with the radmenuitem popup after adding the dropshadoweffect on the styling of border.

<

 

Popup x:Name="PART_Popup" VerticalOffset="0" HorizontalOffset="0">

 

 

 

<Border BorderBrush="{StaticResource RadMenu_PopupShadowBorder2}" BorderThickness="0,0,0,0">

 

 

 

<Border BorderBrush="{StaticResource RadMenu_PopupShadowBorder1}" BorderThickness="0,0,0,0">

 

 

 

<Border BorderBrush="{StaticResource BorderOuterBrush}" BorderThickness="0">

 

 

 

<Border.Effect>

 

 

 

<DropShadowEffect BlurRadius="8" Direction="330" ShadowDepth="3" Opacity="0.85"/>

 

 

 

</Border.Effect>

 

 

 

<Border.Background>

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

<GradientStop Color="#E5040608"/>

 

 

 

<GradientStop Color="#E50F161E" Offset="0.5"/>

 

 

 

<GradientStop Color="#D83C536A" Offset="1"/>

 

 

 

</LinearGradientBrush>

 

 

 

</Border.Background>

 

 

 

<Grid>

 

 

 

<ItemsPresenter />

 

 

 

</Grid>

 

 

 

</Border>

 

 

 

</Border>

 

 

 

</Border>

 

 

 

</Popup>



 

1 Answer, 1 is accepted

Sort by
0
Accepted
Pana
Telerik team
answered on 18 Nov 2009, 04:52 PM
Hi Cheng Lim Sek,

The Menu items have code behind that sets the position of the popup. Adding shadow effect seems to alter the width and height of the popup and offsets the final location of the popup. I tried your case here by adding shadow effect to one of the borders in the popup and the popup was positioned incorrectly.

I managed to fix this by adding grid in the popup with shadowed border and the rest of the popup contents. That way the shadow does not affect the popup sizing and positioning.

This is example code that can be used in the menu items:

<Popup x:Name="PART_Popup" VerticalOffset="-2" HorizontalOffset="-3">
    <Grid>
        <Border Background="Black" CornerRadius="3" Opacity="0.5">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
        </Border>
        <Border
            x:Name="DropDownBorder"
            BorderBrush="{StaticResource RadMenuPopUpOuterBorder}"
            BorderThickness="{StaticResource RadMenuPopUpOuterBorderThickness}"
            CornerRadius="{StaticResource RadMenuPopUpOuterBorderCornerRadius}"
            Background="{Binding ElementName=backgroundBorder, Path=BorderBrush}">
            <Border
                x:Name="backgroundBorder"
                Background="{StaticResource RadMenuPopUp}"
                BorderBrush="{StaticResource RadMenuPopUpInnerBorder}"
                BorderThickness="{StaticResource RadMenuPopUpInnerBorderThickness}"
                CornerRadius="{StaticResource RadMenuPopUpInnerBorderCornerRadius}">
                <Grid>
                    <Border HorizontalAlignment="Left" BorderBrush="{StaticResource RadMenuPopUpLeftColumnInnerBorder}" Width="25" BorderThickness="0 0 1 0" >
                        <Border  Background="{StaticResource RadMenuPopUpLeftColumnBackground}" Width="24" BorderBrush="{StaticResource RadMenuPopUpLeftColumnOuterBorder}" BorderThickness="0 0 1 0" />
                    </Border>
                    <ItemsPresenter />
                </Grid>
            </Border>
        </Border>
    </Grid>
</Popup>

You can add shadow like that in the templates of the telerikNavigation:RadMenuItem

Greetings,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Menu
Asked by
Cheng Lim Sek
Top achievements
Rank 1
Answers by
Pana
Telerik team
Share this question
or