ItemsPanel

[GARY]

Hi All

I am trying to change the background colour of the ItemsPanel of the RadTabControl to transparent 

I tried using:        
        <telerik:RadTabControl.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadWrapPanel Background="Transparent"/>
            </ItemsPanelTemplate>
        </telerik:RadTabControl.ItemsPanel>

but that didnt work (curiously changing the colour to yellow was ok).

While I am here has anybody successfully added a button to tabpanel (not each tabitem) to make a tab control that looks like Chrome, Firefox etc.

Thanks

Paul

[Petar Mladenov]

Hi Gary,

 We prepared a sample project for you showing a RadTabControl with edited Template. In order to make the TabStrip Transparent, you need to use the "HeaderBackGround" Border:

<Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="{x:Type telerik:RadTabControl}">
                       <Grid>
                           <telerik:RadDockPanel LastChildFill="True">
                               <telerik:LayoutTransformControl x:Name="HeaderDockedElement"
                                                               IsTabStop="False"
                                                               telerik:RadDockPanel.Dock="Top">
                                   <Grid>
                                       <Border x:Name="HeaderBackground"
                                               Background="Transparent"
                                               Visibility="{TemplateBinding BackgroundVisibility}" />

As for the Browser-like behaviour: you can use custom ItemTemplate for the TabItems:

<DataTemplate x:Key="TabItemTemplate" >
          <Grid>
              <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="Auto" />
              </Grid.ColumnDefinitions>
              <Rectangle Width="20" Height="20" Margin="2" Fill="DeepSkyBlue" />
              <TextBlock Text="{Binding Header}" Grid.Column="1" />
              <telerik:RadButton Margin="10,0,0,0" Grid.Column="2" Command="{Binding RemoveTab}" Content="X" Visibility="{Binding Path=IsDeleteAllowed, Converter={StaticResource BoolToVisConverter}}" ToolTipService.ToolTip="Remove item" />
          </Grid>

      </DataTemplate>

Please examine the solution and let us know if it satisfies you. We would be glad to help you further. Best wishes,
Petar Mladenov
the Telerik team

[Alfons]

I have difficulties with the attached solution. I can build and run it.

But if I want to open the MainWindow.xaml in the designer, I get the error "Error    3    Undefined CLR namespace. The 'clr-namespace' URI refers to a namespace 'TabControlBrowser' that is not included in the assembly."
It tried several things including re-adding the telerik references, setting the target framework from ".Net framework 4 client profile" to ".Net framework 4" and changing the platform from "x86" to "Any CPU", but no success...

Any ideas?

[Alfons]

Just after posting the previous reply I got the luminous idea of restarting Visual Studio. That did the trick! :-S

[Alfons]

Dear Petar,

I am trying to use parts of your TabControlBrowser and I am beginning to understand it. But now I want to set the TabStripPlacement to 'Bottom'. When I do that in your example, the tabs & content are turned up side down. How can I get the tabs & content straight up again?

Regards,

Alfons

[Alfons]

OK, OK, the up side down problem is solved. I discovered the Triggers in the XAML code. I forgot to run your project, I only looked at the designer.

But now I have another anomaly discovered in the project. I would like to scroll by items instead of pixels. I have to click 4 or 5 times to shift one item in the 'TabPanel'. So I thought to set the ScrollMode of the RadTabControl to 'Item', but now the Tabs only scroll from begin to end with one click.

How can I scroll one tab at the time?

Alfons

[Petar Mladenov]

Hello Alfons,

ScrollMode="Item" works fine in the attached project (TabControlBrowser.zip) from 25.11.2011. Could you please send us an isolating sample demonstrating your issue. This way we would be better able to think up a workaround. Thank you in advance for your cooperation.
 
Regards,
Petar Mladenov
the Telerik team

[Alfons]

Hi Petar,

Sorry for the late response, but I have been ill last week.

I think I pinpointed the problem with scrolling per item. I opened your original solution again, coz I had made a few changes to it as you thought.
But when I set

ScrollMode="Item" and TabStripPlacement="Bottom"

I cannot scroll per item any more. Now I can only scroll from begin to end and back with just one click.

Can you reproduce it, and do you have a solution?

Regards,

Alfons

[Petar Mladenov]

Hi Alfons,

 We managed to reproduce this issue and actually, we have previously logged it in our PITS:
TabCoctrol: Scrolling in TabStrip does not work well when TabStripPlacement=Left  or Bottom and  ScrollMode=Item
Please excuse us if there is any inconvenience caused.

Kind regards,
Petar Mladenov
the Telerik team