TabControl and Windows7 theme issue

12 posts, 0 answers
  1. SEAFC
    SEAFC avatar
    8 posts
    Member since:
    May 2010

    Posted 26 Oct 2010 Link to this post

    Hi.

    I'm going to talk about an SL4 application.

    Main goal for us is to provide a good system's monitoring experience for our users. Our system consists in a set of services running silently in behind. The users need to be able to monitor the services performance. I have a RadTabControl for showing a set of services monitoring information.

    this is the configuration for my RadTabControl:
     

     

    <telerik:RadTabControl
                    VerticalAlignment="Top" 
                    ScrollMode="Viewport"
                    BorderThickness="0"                
                    Background="Transparent"
                    ItemsSource="{Binding ServiceQualityStatistics}"
                    ContentTemplate="{StaticResource ServiceTabContentTemplate}"
                    SelectedIndex="{Binding MaximizedServiceQualityIndex, Mode=TwoWay}"
                    telerik:StyleManager.Theme="Windows7"      >

     


    Every tab header has the main figures (chart and summary data) for each service, and the tab content will provide the extended information and available actions.

    We have a template for each header:

    <telerik:RadTabControl.ItemContainerStyle>
           <Style TargetType="telerik:RadTabItem">
                  <Setter Property="HeaderTemplate">
                  <Setter.Value>
                          <DataTemplate>
                                <Grid  Height="200" Width="180">
      
                                   <!-- BOUND CONTENT GOES HERE -->
      
                                </Grid>
                          </DataTemplate>
                  </Setter.Value>
           </Style>
    </telerik:RadTabControl.ItemContainerStyle>

     

     

                           
    When configuring the RadTabControl as it's by default (no theme assigned) I faced no problems.... but, when I set the control's theme to "Windows7" (as you can see in the sample code), the headers become small, I mean, every header remains about the height of a regular textbox (instead of the 200px I set). As soon as I change the theme (remove that option), the headers become properly sized again.

    Do you have any idea on what's going on with this? do I need to customize the theme for my headers to be properly displayed?

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Oct 2010 Link to this post

    Hi Miguel Luna,

    The issue is caused by the fact that the implicitly set Windows7 Theme takes precedence over the ItemContainerStyle. This is the expected behavior of the RadTabControl and therefore it is best to define a HeaderTemplate and ContentTemplate for the RadTabItems using the ItemTemplate and ContentTemplate properties of the RadTabControl.

    I prepared a sample project for you. Have a look at it and let us know if it works for you or if you need more info.

    Regards,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. SEAFC
    SEAFC avatar
    8 posts
    Member since:
    May 2010

    Posted 16 Nov 2010 Link to this post

    Hi and sorry for the delay in my answer.... this is what I was looking for. Thanks! and congratulations for your great supporting job.

    Also..... could you, please, attach a sample on how to customize the TabControl style (as I know, this control has changed since the last release, and I find no sample on how to customize its style, using custom theme and/or simple style).
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 16 Nov 2010 Link to this post

    Hi Miguel Luna,

    You can have a look at these articles about creating custom themes for RadControls. And, you can examine the Styling and Appearance section of the RadTabControl.  Also, you can find many different scenarios demonstrated in the forums:

    I attached a sample project which illustrates how to modify the default Style/ControlTemplate of the RadTabItem to bold each selected Tab. You can also give it a try and let us know if you need more info.

    Kind regards,
    Tina Stancheva
    the Telerik team
    See What's New in RadControls for Silverlight in Q3 2010 on Tuesday, November 16, 2010 11:00 AM - 12:00 PM EST or 10:00 PM - 11:00 PM EST: Register here>>
  6. SEAFC
    SEAFC avatar
    8 posts
    Member since:
    May 2010

    Posted 17 Nov 2010 Link to this post

    Hi Tina.... well, I'm sorry about not being too much concrete on this. The problem I'm facing is that your demos site is not working for me. I had found all those links before but, everytime I try your site, this is what I face:

    Detalles de error de página web
      
    Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8)
    Fecha: Wed, 17 Nov 2010 07:15:04 UTC
      
      
    Mensaje: Error de sintaxis
    Línea: 1
    Carácter: 1
    Código: 0
      
      
    Mensaje: 'Telerik.Web.UI.RadTreeView' es nulo o no es un objeto
    Línea: 384
    Carácter: 9
    Código: 0
      
      
    Mensaje: 'null' es nulo o no es un objeto
    Línea: 176
    Carácter: 19
    Código: 0
      
      

    .... and this is why I asked for a sample project :·(

    Anyway your sample was very useful for me. Thanks a lot! :·)
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 22 Nov 2010 Link to this post

    Hi Miguel Luna,

    I am glad that you found the sample project useful. However, I wanted to ask you if you can elaborate on your issues with our site. The exceptions you posted are new to us so I was wondering whether you can give us the steps to reproduce, perhaps send us a snapshot or a video, if you can?

    And even though I cannot be sure what might be causing the exceptions, you can try clearing your cache. Sometimes our demo site cannot properly update when the cache isn't cleared. You can also try clearing the Browser's history. Please let us know how it goes.

    Regards,
    Tina Stancheva
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  8. SEAFC
    SEAFC avatar
    8 posts
    Member since:
    May 2010

    Posted 24 Nov 2010 Link to this post

    Hi.

    Well the full exception is this one:

     

    Detalles de error de página web
      
    Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8)
    Fecha: Wed, 24 Nov 2010 12:27:14 UTC
      
      
    Mensaje: Error de sintaxis
    Línea: 1
    Carácter: 1
    Código: 0
      
      
    Mensaje: 'Telerik.Web.UI.RadTreeView' es nulo o no es un objeto
    Línea: 521
    Carácter: 9
    Código: 0
      
      
    Mensaje: 'null' es nulo o no es un objeto
    Línea: 176
    Carácter: 19
    Código: 0

     
    As I said, I faced this problem everytime I tried to load any of your samples from http://www.telerik.com/help/silverlight/ No matter the sample I chose, the same error persists. The web page remains black and I can see just the header (in white) for the sample name, and the search tool, in the top-right side..... and nothing else.




  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Nov 2010 Link to this post

    Hi Miguel Luna,

    We tested the links you pointed in IE8, Mozilla and Google Chrome 7 and everething works as expected on our side. Can you please tell us the browser version you are using and your OS?

    Best wishes,
    Tina Stancheva
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  10. SEAFC
    SEAFC avatar
    8 posts
    Member since:
    May 2010

    Posted 29 Nov 2010 Link to this post

    Hi.

    I've done a lot of tests and I realized that it's a fault on our proxy server. Sorry for the inconveniences and thanks for your support.

    Best regards.
  11. IsolatedStorage
    IsolatedStorage avatar
    15 posts
    Member since:
    Sep 2009

    Posted 10 Mar 2011 Link to this post

    I was having a similar problem but combined with this issue. Using the sample projects from both I was able to produce a working version that combined the TabItem visibility binding with the StyleManager Theme.

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <telerik:ContainerBindingCollection x:Key="bindings">
                <telerik:ContainerBinding PropertyName="Visibility" Binding="{Binding IsVisible, Mode=TwoWay}" />
                <telerik:ContainerBinding PropertyName="IsSelected" Binding="{Binding IsSelected, Mode=TwoWay}" />
            </telerik:ContainerBindingCollection>
            <Style x:Key="BaseTabControlStyle" TargetType="telerik:RadTabControl">
                <Setter Property="telerik:StyleManager.Theme" Value="Office_Blue" />
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <CheckBox Grid.Row="0" Name="TabCheckSet" IsChecked="False" Click="TabCheckSet_Click" IsThreeState="False" />
        <telerik:RadTabControl Grid.Row="1" x:Name="tabControl" Style="{StaticResource BaseTabControlStyle}" >
            <telerik:RadTabControl.ItemTemplate>
                <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource bindings}">
                    <Grid  Height="200"
                           Width="180">
                        <TextBlock Text="{Binding Header}" />
                    </Grid>
                </DataTemplate>
            </telerik:RadTabControl.ItemTemplate>
            <telerik:RadTabControl.ContentTemplate>
                <DataTemplate>
                        <TextBlock Text="{Binding Value}" />
                </DataTemplate>
            </telerik:RadTabControl.ContentTemplate>
        </telerik:RadTabControl>
    </Grid>
  12. netra
    netra avatar
    1 posts
    Member since:
    Apr 2011

    Posted 25 Apr 2011 Link to this post

    I am using a tab control in that i have Rad panel bar item in the content template.

    I am getting the data for the first tab in content template.
    But when i click on the other tabs the data of the selected tab is not changing.Is there any property we need to set in the tab control to set the data?

    I am very thankful for your quick responses.


    <Grid x:Name="LayoutRoot"
              Background="White">
            <telerik:RadTabControl x:Name="myTabControl"
                                   ScrollMode="Viewport"
                                   BorderThickness="0"
                                   Background="Transparent"
                                   telerik:StyleManager.Theme="Windows7">
                <telerik:RadTabControl.ItemTemplate>
                    <DataTemplate>
                        <Grid  Height="200"
                               Width="180">
                            <TextBlock Text="{Binding Header}" />
                        </Grid>
                    </DataTemplate>
                </telerik:RadTabControl.ItemTemplate>
                <telerik:RadTabControl.ContentTemplate>
                    <DataTemplate>
                        <StackPanel>
                        <telerik:RadPanelBar VerticalAlignment="Stretch" x:Name="radPanelBar" Width="570" Height="510" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
                            <telerik:RadPanelBarItem IsExpanded="True"
                                                                 >
                                <telerik:RadPanelBarItem.Header  >
                                    <StackPanel Orientation="Horizontal" Height="25">
                                        <TextBlock Text="Header Program" FontSize="10.667" Foreground="#FF8E8888" FontWeight="Bold" Margin="5 4 5 5" Width="300" />
                                       
                                    </StackPanel>
                                </telerik:RadPanelBarItem.Header >
                                <ScrollViewer  HorizontalScrollBarVisibility="Auto" Height="350" VerticalScrollBarVisibility="Auto">
                                    <StackPanel Orientation="Vertical" Width="500">

                                        <TextBlock Text="{Binding Content}" />
                                    </StackPanel>
                                </ScrollViewer>
                            </telerik:RadPanelBarItem>
                        </telerik:RadPanelBar>
                        <TextBlock Text="{Binding Content}" />
    </StackPanel>
                    </DataTemplate>
                </telerik:RadTabControl.ContentTemplate>
            </telerik:RadTabControl>
  13. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 28 Apr 2011 Link to this post

    Hello Miguel Luna,

    I am unable to reproduce your issue in my environment. Could you please examine the attached project and let me know if I have missed something. Note that I use the dlls from the Q1 SP1.

    Kind regards,
    Petar Mladenov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner