Help button on TabControl Header

[Chris]

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.

[Hristo]

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

[Chris]

Hi Hristo,

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

Thanks for you help
Chris.

[Barry]

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

[Hristo]

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