Problem with DropShadowEffect

2 posts, 1 answers
  1. Cheng Lim Sek
    Cheng Lim Sek avatar
    33 posts
    Member since:
    Oct 2009

    Posted 12 Nov 2009 Link to this post

    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>



     

  2. Answer
    Pana
    Admin
    Pana avatar
    748 posts

    Posted 18 Nov 2009 Link to this post

    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.
  3. DevCraft banner
Back to Top