Adding an Icon Right Aligned in the Tab Strip

6 posts, 0 answers
  1. Chris Andrews
    Chris Andrews avatar
    41 posts
    Member since:
    Mar 2010

    Posted 05 Dec 2011 Link to this post

    Hello All,

    I am trying to display an icon in the RadTabControl, right aligned, at the tab strip level.  I have done this with the RibbonBar using the TabStripAdditionalContent property, but in this particular view, I do not have a RibbonBar.  I was wondering if there is a similiar property I can use to achieve this, or using a style / template.

    Any help is appreciated.

    Thanks in advance
  2.
  3. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 08 Dec 2011 Link to this post

    Hi Chris,

    Please find attached an example.

    If you have further questions please do not hesitate to ask us.
    I hope this will help you.


    All the best,
    Dimitrina
    the Telerik team

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

  5. Chris Andrews
    Chris Andrews avatar
    41 posts
    Member since:
    Mar 2010

    Posted 15 Dec 2011 Link to this post

    Hello,  thanks for the assistance.

    Unfortunately this is not what I hoped to achieve.  I can get the icon in the individual header just fine, however, I was just looking to place an icon all the way to the right.  See attached screenshot for desired result.

    Thanks Again,
    Chris
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3154 posts

    Posted 19 Dec 2011 Link to this post

    Hello Chris Andrews,

     I prepared a project for you in which I've edited the default ControlTemplate of the RadTabControl like so (new items added with green background):

    <ControlTemplate TargetType="{x:Type telerik:RadTabControl}">
                            <Grid>
                                <telerik:RadDockPanel LastChildFill="True">
                                    <telerik:LayoutTransformControl x:Name="HeaderDockedElement" telerik:RadDockPanel.Dock="Top" IsTabStop="False">
                                        <Grid>
                                            <Border x:Name="HeaderBackground" Background="{TemplateBinding HeaderBackground}" Visibility="{TemplateBinding BackgroundVisibility}"/>
                                            <Border BorderBrush="#FF848484" BorderThickness="0,0,0,1" SnapsToDevicePixels="True"/>
                                            <telerik:RadDockPanel Panel.ZIndex="10">
                                                <StackPanel Orientation="Horizontal" telerik:RadDockPanel.Dock="Right" Margin="2,4,4,2">
                                                <ToggleButton x:Name="DropDownButtonElement" ClickMode="Press"  IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{TemplateBinding DropDownButtonStyle}" Visibility="Collapsed">
                                                    <telerik:RadContextMenu.ContextMenu>
                                                        <Telerik_Windows_Controls_TabControl:DropDownMenu x:Name="DropDownMenuElement" ClickToOpen="True" DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}" ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}" Placement="Bottom" Style="{TemplateBinding DropDownStyle}" StaysOpen="False"/>
                                                    </telerik:RadContextMenu.ContextMenu>
                                                </ToggleButton>
                                                    <Image Width="16" Height="16" Source="Images/check.png" />
                                                </StackPanel>
    Please check it out and let us know if it satisfies you. Kind regards,
    Petar Mladenov
    the Telerik team

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

  8.
  9. Alfons
    Alfons avatar
    14 posts
    Member since:
    Mar 2012

    Posted 17 Aug 2012 Link to this post

    Dear Petar,

    I am not so familiar with templates (yet). But in your example project the template takes about 350 lines of code. Besides it is a lot of typing; all those hard coded settings in the style, is it still possible to apply some Theme to the TabControl?

    Can't you create a style or template derived from the normal RadTabControl and only add a few extra lines to get the icon on the right side? If so, I would love to get an example.
  11. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 22 Aug 2012 Link to this post

    Hello Alfons,

    At the moment the only approach for adding additional content to the RadTabControl is by editing its default ControlTemplate. As we can see how this can be inconvenient, we have logged a feature request in our PITS to add ContentPresenters in the ControlTemplate of the TabControl to support additional content. However, so far this feature hasn't gathered much feedback. But you can vote for it to increase its priority in our to-do list.

    As for theming, unfortunately with the current approach, you need to edit the RadTabControl.ControlTemplate defined in the appropriate theme style files. So if you're not using Office_Black, just let us know and we'll send over a modified ControlTemplate for the theme you're using in your application.

    Kind regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top