Home / Community & Support / Developer Productivity Tools Forums / WPF > TabControl > ItemsPanel

• GARY

  Posted on Nov 22, 2011 (permalink)

  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
  

  
  

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Nov 25, 2011 (permalink)

  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

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

  Attached files

  • TabControlBrowser.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > TabControl > ItemsPanel