DropDown

[CarlosLima]

Hi.
Is it possible to have a RadDropDownButton on the header of a tab and have it auto-expand on the tab's mouse-over event?
Also how do I place the content to expand aligned with the tab's left margin?

<telerik:RadTabItem Style="{StaticResource RadTabItemStyle1}" Tag="/Page5">
                           <telerik:RadTabItem.Header>
                               <Grid HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="65"  Margin="3,0,3,0">
                                   <Grid.ColumnDefinitions>
                                       <ColumnDefinition Width="*"></ColumnDefinition>
                                       <ColumnDefinition Width="15"></ColumnDefinition>
                                   </Grid.ColumnDefinitions>
                                   <TextBlock Text="Trends" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Verdana" FontSize="12" Margin="0" FontWeight="Bold"></TextBlock>
                                   <telerik:RadDropDownButton x:Name="trendsDropDown" Grid.Column="1" Content="" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Style="{StaticResource RadDropDownButtonStyle1}">
                                       <telerik:RadDropDownButton.DropDownContent>
                                           <telerik:RadMenu Orientation="Vertical" Style="{StaticResource RadMenuStyle1}">

                                               <telerik:RadMenuItem  Style="{StaticResource RadMenuItemStyle}" Click="RadMenuItem_Click"  >
                                                   <telerik:RadMenuItem.Header>
                                                       <TextBlock Text="Easy set up" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                   </telerik:RadMenuItem.Header>
                                               </telerik:RadMenuItem>

                                               <telerik:RadMenuItem  Style="{StaticResource RadMenuItemStyle}"  Click="RadMenuItem_Click"  >
                                                   <telerik:RadMenuItem.Header>
                                                       <TextBlock Text="It's free!" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                   </telerik:RadMenuItem.Header>
                                               </telerik:RadMenuItem>

                                               <telerik:RadMenuItem  Style="{StaticResource RadMenuItemStyle}"  Click="RadMenuItem_Click"  >
                                                   <telerik:RadMenuItem.Header>
                                                       <TextBlock Text="Safe and secure" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                   </telerik:RadMenuItem.Header>
                                               </telerik:RadMenuItem>

                                               <telerik:RadMenuItem  Style="{StaticResource RadMenuItemStyle}" Click="RadMenuItem_Click"  >
                                                   <telerik:RadMenuItem.Header>
                                                       <TextBlock Text="Timely alerts" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                   </telerik:RadMenuItem.Header>
                                               </telerik:RadMenuItem>

                                               <telerik:RadMenuItem Style="{StaticResource RadMenuItemStyle}"  Click="RadMenuItem_Click"  >
                                                   <telerik:RadMenuItem.Header>
                                                       <TextBlock Text="Easy budgeting" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                   </telerik:RadMenuItem.Header>

                                                   <telerik:RadMenuItem Style="{StaticResource RadMenuItemStyle}"  Click="RadMenuItem_Click"  >
                                                       <telerik:RadMenuItem.Header>
                                                           <TextBlock Text="Reduce debit" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                       </telerik:RadMenuItem.Header>
                                                   </telerik:RadMenuItem>
                                                   <telerik:RadMenuItem Style="{StaticResource RadMenuItemStyle}"  Click="RadMenuItem_Click"  >
                                                       <telerik:RadMenuItem.Header>
                                                           <TextBlock Text="Mobile apps" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                       </telerik:RadMenuItem.Header>
                                                   </telerik:RadMenuItem>
                                                   <telerik:RadMenuItem Style="{StaticResource RadMenuItemStyle}" Click="RadMenuItem_Click"  Tag="/Page3">
                                                       <telerik:RadMenuItem.Header>
                                                           <TextBlock Text="Mint on Yahoo!" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                       </telerik:RadMenuItem.Header>
                                                   </telerik:RadMenuItem>

                                               </telerik:RadMenuItem>

                                               <telerik:RadMenuItem  Style="{StaticResource RadMenuItemStyle}"  Click="RadMenuItem_Click"  >
                                                   <telerik:RadMenuItem.Header>
                                                       <TextBlock Text="Achieve your goals" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                   </telerik:RadMenuItem.Header>
                                               </telerik:RadMenuItem>

                                               <telerik:RadMenuItem  Style="{StaticResource RadMenuItemStyle}"  Click="RadMenuItem_Click"  >
                                                   <telerik:RadMenuItem.Header>
                                                       <TextBlock Text="Helpfull graphs" Style="{StaticResource MenuTextBoxStyle}"></TextBlock>
                                                   </telerik:RadMenuItem.Header>
                                               </telerik:RadMenuItem>
                                           </telerik:RadMenu>

                                       </telerik:RadDropDownButton.DropDownContent>

                                   </telerik:RadDropDownButton>
                               </Grid>

                           </telerik:RadTabItem.Header>
                       </telerik:RadTabItem>

Attached is a sample of the alignment situation.

Thanks.

[Petar Mladenov]

Hi CarlosLima,

Please examine the attached solution where the described approach is implemented. Basically, I use the MouseEnter event of the RadTabItem and then access the DropDown with the UiElement.ChildrenOftype<> method. For the alignment I  edited the template of the RadDropDownButton vie Expression Blend and set a Margin of the DropDownPopupBorder. You can play with this margin and bind it to the Margin of the TextBlock in the Header.
Hope this is what you had in mind. Feel free to ask if you need further assistance.


Regards,
Petar Mladenov
the Telerik team

[CarlosLima]

Hi.
Thanks for your reply.
The mouse enter solved the expand problem but the margin for the left alignment doesn't. You see, we have multiple tabs created dynamically based on information returned by a database and the template is the same for all tabs which have different header texts. This means that one margin will not work for different text lenghts. Is there any other way of achieving this?
Thanks.

[CarlosLima]

Another thing, when using mouseleave (I want it to collapse when mouse gets out) there is a strange behaviour.

[Alex Fidanov]

Hello CarlosLima,

Another option is to stretch the dropdown button horizontally (HorizontalAlignment="Stretch") so that the dropdown content appears under its left margin. The header text of the TabItem you can bind to the RadDropDownButton's Content property. In order to get the same look and feel as the screenshot, you can modify the template/style of the dropdown button and remove its visual states and background elements.

Regarding the mouse leave and closing the drop down content, you will not be able to achieve this just by handling the MouseLeave event of the RadTabItem. You would also have to consider the scenario when the mouse leaves the RadTabItem but enters the RadDropDownButton's dropdown popup.

All the best,
Alex Fidanov
the Telerik team