Home / Community & Support / Developer Productivity Tools Forums / WPF > TabControl > Drop Down Menu Styling

• Frankie

  Posted on Nov 30, 2011 (permalink)

  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
  

  Attached files

  • dropdownmenu-shadow.jpg

  Reply

• Kiril Stanoev Kiril Stanoev

  Posted on Dec 5, 2011 (permalink)

  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 >>

  Reply

• Frankie

  Posted on Dec 14, 2011 (permalink)

  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
  
  

  Attached files

  • dropdownmenu-shadow2.jpg

  Reply

• Kiril Stanoev Kiril Stanoev

  Posted on Dec 19, 2011 (permalink)

  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 >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > TabControl > Drop Down Menu Styling