Styling Drop Down MouseOver

[Ben]

I've been trying to style the Rad Tab Control and I've been mostly successful with one minor detail remaining. In the drop down button on the far right (where you can click through the other tabs) if you highlight over the options the background color turns orange - you can see what I'm talking about in the image below. I have tried to change the theme and all of the options seem to have a blue hover over color. It seems as though this orange background is being applied in the DropDownStyle's ItemsPresenter but I can't figure out where to make the change to use the correct color. Additionally, I'd like if the elements were stretched to take up the entire space in the drop down so that the "x" close buttons are all neatly aligned on the left. 

If you can help me with these two issues I would greatly appreciate it.

1. Blue hover over on Drop Down Menu items (instead of the orange)
2. Stretch the elements in the ItemsPresenter to take up the full space so that they are all neatly aligned.

On a side note, if you have the hex colors or brush easily accessible for the other blue hover overs (like on the office_blue or Windows7 themes) I would appreciate it so that I can make sure it matches with the rest of the system.

Thank you,
Ben
Drop Down Menu Image

[Petar Mladenov]

Hello Ben,

This color cannot be changed by editing the default style of the RadTabControl. You have to get the style of the DropDownMenuItem from the themes files of the TabControls located in the "Themes" subfolder in the installation folder of RadTabControls. Then, in the "DropDownMenuItemTemplate" you can play with the "MouseOverVisual" border. In the attached project I used the normal visual color of the RadTabItems from the OfficeBlue theme ( this LinearGradientBrush is located in the common.xaml file in the Themes\Office\Blue).
On the other hand in order to align the close buttons of the TabItems properly, you can use ItemTemplate like in the attached solution. Could you please let us know if this is suitable for you ?

Regards,
Petar Mladenov
the Telerik team

[Ben]

I'm not sure I'm following your sample. In the sample you provided, if I comment out/remove the style in Window.Resources there is no change to how the menu item is displayed and it still has the golden/orange border. Also, if I modify the DropDownMenuItemTemplate that is in the Themes_WPF project how do I make sure that those changes are replicated in the Telerik controls DLLs since we're not directly referencing any of the Telerik theming DLLs in our solution.

Thanks,
Ben

[Petar Mladenov]

Hello Ben,

When commenting the Style of the DropDownMenuItem,

<!--<Style TargetType="Telerik_Windows_Controls_TabControl:DropDownMenuItem">
          <Setter Property="Template" Value="{StaticResource DropDownMenuItemTemplate}" />
          <Setter Property="SubmenuItemTemplateKey" Value="{StaticResource DropDownMenuItemTemplate}" />
          <Setter Property="SubmenuHeaderTemplateKey"
              Value="{StaticResource DropDownMenuItemTemplate}" />
          <Setter Property="TopLevelHeaderTemplateKey"
              Value="{StaticResource DropDownMenuItemTemplate}" />
          <Setter Property="TopLevelItemTemplateKey" Value="{StaticResource DropDownMenuItemTemplate}" />
          <Setter Property="Background" Value="Transparent" />
          <Setter Property="Padding" Value="3" />
          <Setter Property="HorizontalContentAlignment" Value="Left" />
          <Setter Property="BorderThickness" Value="1" />
      </Style>-->

The default style is applied and both the "golden" border and golden selection mouse over color is applied. Please keep in mind that I have changed only one default color:

<!-- Hover -->
         <Border x:Name="MouseOverVisual" Opacity="0"
             CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"
             BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}"
             BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}">
             <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}"
                 CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"
                 BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"
                 >
                 <Border.Background>
                     <LinearGradientBrush  EndPoint="0.5,1" StartPoint="0.5,0">
                         <GradientStop Color="#AAAAAAAA" />
                         <GradientStop Color="#FFCAE1FF" Offset="1" />
                     </LinearGradientBrush>
                 </Border.Background>
             </Border>
         </Border>

So the golden border that you have seen is expected. The border can be controlled here;

<!-- Hover -->
              <Border x:Name="MouseOverVisual" Opacity="0"
                  CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"
                  BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}"
                  BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}">
                  <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}"
                      CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"
                      BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"
                      >
                      <Border.Background>
                          <LinearGradientBrush  EndPoint="0.5,1" StartPoint="0.5,0">
                              <GradientStop Color="#AAAAAAAA" />
                              <GradientStop Color="#FFCAE1FF" Offset="1" />
                          </LinearGradientBrush>
                      </Border.Background>
                  </Border>
              </Border>

On the other hand, you don't need to change any telerik dlls. In this case using an Implicit Style
(style without x:Key) is completely sufficient.
Let us know if you need more info.

Kind regards,
Petar Mladenov
the Telerik team

[Ben]

I must have missed that the first time around but that's what I needed. Thanks.