ItemsPanel

9 posts, 0 answers
  1. GARY
    GARY avatar
    1 posts
    Member since:
    Jul 2011

    Posted 22 Nov 2011 Link to this post

    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

  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 25 Nov 2011 Link to this post

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

  3. UI for WPF is Visual Studio 2017 Ready
  4. Alfons
    Alfons avatar
    14 posts
    Member since:
    Mar 2012

    Posted 05 Oct 2012 Link to this post

    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?
  5. Alfons
    Alfons avatar
    14 posts
    Member since:
    Mar 2012

    Posted 05 Oct 2012 Link to this post

    Just after posting the previous reply I got the luminous idea of restarting Visual Studio. That did the trick! :-S
  6. Alfons
    Alfons avatar
    14 posts
    Member since:
    Mar 2012

    Posted 10 Oct 2012 Link to this post

    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
  7. Alfons
    Alfons avatar
    14 posts
    Member since:
    Mar 2012

    Posted 12 Oct 2012 Link to this post

    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
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 15 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

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

    Posted 23 Oct 2012 Link to this post

    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
  10. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready