Drop Down Menu Styling

4 posts, 0 answers
  1. Frankie
    Frankie avatar
    6 posts
    Member since:
    Nov 2011

    Posted 30 Nov 2011 Link to this post

    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
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 05 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Frankie
    Frankie avatar
    6 posts
    Member since:
    Nov 2011

    Posted 14 Dec 2011 Link to this post

    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

  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 19 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top