This is a migrated thread and some comments may be shown as answers.

Help button on TabControl Header

4 Answers 79 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 27 Apr 2012, 02:07 PM
Is it possible to add a help button to the TabControl header?

I would like to add a hyperlink button to the header row that is always displayed on the far right.  The button would have an image and when clicked would load a url to our help system.  The page name would be defined by the current tab; for example

||  |----------|----------|----------|                                          ||
||  |  Tab 1  |  Tab 2  |  Tab 3  |                                      ?  ||

 
When on tab 1 and '?' is clicked a new browser window would be opened to the url
http://www.somewebsite.com/help.abc.html

For tab 2 this could be http://www.somewebsite.com/help/def.html

I would need to set each tab's help id within the xaml and the '?' button would know which tab is currently displayed and therefore which help id to pass

Is this possible?
Any help will be much appreciated

Thanks
Chris.


4 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 01 May 2012, 08:09 AM
Hi Chris,

You could implement your suggested solution by either customizing the RadTabControl control template or by simply positioning a button outside the tab control displayed on the correct place.

1) You could customize the control template and insert a button next to the scroll buttons (RepeatButton with x:Name of LeftScrollButtonElement or RightScrollButtonElement) in the tab strip header row. Following article describes in detail how to edit the control template of our controls using Blend, http://www.telerik.com/help/silverlight/common-styling-appearance-edit-control-templates-blend.html.
2) The other approach is to place a button over the TabControl and position it on the far right part of the header. This sound a bit like a hack but is widely used technique to customize visual appearance. I think the button for opening the help is quite decoupled from the tab control, thus it might be placed outside the control.

Regards,
Hristo
the Telerik team

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

0
Chris
Top achievements
Rank 1
answered on 01 May 2012, 11:40 AM
Hi Hristo,

I have gone with customizing the control template, that has done the job

Thanks for you help
Chris.
0
Barry
Top achievements
Rank 1
answered on 21 Aug 2012, 04:02 PM
I'm not a big fan of customizing control templates for small things. You can do it easily like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0">
        <RowDefinition Height="*">
    </Grid.RowDefinitions>
    <Button Margin="0,0,7,-37" HorizontalAlignment="Right" Content="Expand" Canvas.ZIndex="100"/>
    <telerik:RadGridView Grid.Row="1">
        ...
    </telerik:RadGridView>
</Grid>

Your margin might be different depending on your button height and width (which I don't show here). ZIndex keeps it on top of the tab control, otherwise it might get hidden. This button will end up on top of a tab if you have too many tabs and the tab control is not wide enough to accommodate the button. 

Results: Button In Tab Control
0
Hristo
Telerik team
answered on 23 Aug 2012, 08:35 AM
Hello,

Thank you for describing the second approach in details Barry.

The benefit of this approach is that you do not have to understand the TabControl template in order to implement it. Also, the button stays decoupled from the TabControl and changing the style will not affect the application functionality.
The drawback, however, is the need to matching the button and the TabControl visually when changing the layout.

Greetings,
Hristo
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
TabControl
Asked by
Chris
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Chris
Top achievements
Rank 1
Barry
Top achievements
Rank 1
Share this question
or