Help button on TabControl Header

5 posts, 0 answers
  1. Chris
    Chris avatar
    8 posts
    Member since:
    Jun 2010

    Posted 27 Apr 2012 Link to this post

    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.


  2. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 01 May 2012 Link to this post

    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 >>

  3. DevCraft banner
  4. Chris
    Chris avatar
    8 posts
    Member since:
    Jun 2010

    Posted 01 May 2012 Link to this post

    Hi Hristo,

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

    Thanks for you help
    Chris.
  5. Barry
    Barry avatar
    90 posts
    Member since:
    Jul 2011

    Posted 21 Aug 2012 Link to this post

    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
  6. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 23 Aug 2012 Link to this post

    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.

Back to Top
DevCraft banner