This is a migrated thread and some comments may be shown as answers.

TabControl and Windows7 theme issue

11 Answers 98 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
SEAFC
Top achievements
Rank 1
SEAFC asked on 26 Oct 2010, 03:15 PM
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?

11 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 29 Oct 2010, 01:54 PM
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
0
SEAFC
Top achievements
Rank 1
answered on 16 Nov 2010, 10:02 AM
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).
0
Tina Stancheva
Telerik team
answered on 16 Nov 2010, 04:25 PM
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>>
0
SEAFC
Top achievements
Rank 1
answered on 17 Nov 2010, 10:42 AM
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! :·)
0
Tina Stancheva
Telerik team
answered on 22 Nov 2010, 01:05 PM
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
0
SEAFC
Top achievements
Rank 1
answered on 24 Nov 2010, 01:36 PM
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.




0
Tina Stancheva
Telerik team
answered on 29 Nov 2010, 03:01 PM
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
0
SEAFC
Top achievements
Rank 1
answered on 29 Nov 2010, 03:48 PM
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.
0
IsolatedStorage
Top achievements
Rank 1
answered on 10 Mar 2011, 06:04 AM
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>
0
netra
Top achievements
Rank 1
answered on 25 Apr 2011, 01:37 PM
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>
0
Petar Mladenov
Telerik team
answered on 28 Apr 2011, 09:57 AM
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
Tags
TabControl
Asked by
SEAFC
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
SEAFC
Top achievements
Rank 1
IsolatedStorage
Top achievements
Rank 1
netra
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or