This is a migrated thread and some comments may be shown as answers.
DropDown
4 Answers 18 Views
This is a migrated thread and some comments may be shown as answers.
CarlosLima
Top achievements
Rank 1
CarlosLima asked on 23 Dec 2010, 05:26 PM
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.

4 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 28 Dec 2010, 03:01 PM
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
Browse the videos here>> to help you get started with RadControls for Silverlight
0
CarlosLima
Top achievements
Rank 1
answered on 03 Jan 2011, 11:30 AM
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.
0
CarlosLima
Top achievements
Rank 1
answered on 03 Jan 2011, 11:55 AM
Another thing, when using mouseleave (I want it to collapse when mouse gets out) there is a strange behaviour.
0
Alex Fidanov
Telerik team
answered on 04 Jan 2011, 02:25 PM
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
Browse the videos here>> to help you get started with RadControls for Silverlight
Asked by
CarlosLima
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
CarlosLima
Top achievements
Rank 1
Alex Fidanov
Telerik team
Share this question
or