TabControl and Windows7 theme issue

[SEAFC]

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?

[Tina Stancheva]

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

[SEAFC]

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

[Tina Stancheva]

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:

• Edit the RadTabControl to add new elements.
• Removing the Header element border

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

[SEAFC]

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
URI: http://www.telerik.com/help/ScriptResource.axd?d=EcZL0t9ywZTrkubDSMgNl7L-0utRuAxkEGDjQtEmRLNtSuglgEfrl0rMxb2WIdE2TiTVZqOivByra--3UXdgTnmc1eHh0ZRutsHnfXQ6gIusykZDNNi0nbBvG0kigtfniV4JNnY37Z1WbP6-qnMcfLXS2CE1&t=fffffffff758529d


Mensaje: 'Telerik.Web.UI.RadTreeView' es nulo o no es un objeto
Línea: 384
Carácter: 9
Código: 0
URI: http://www.telerik.com/help/silverlight/common-styling-apperance-create-theme-overview.html


Mensaje: 'null' es nulo o no es un objeto
Línea: 176
Carácter: 19
Código: 0
URI: http://www.telerik.com/help/silverlight/common-styling-apperance-create-theme-overview.html

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

Anyway your sample was very useful for me. Thanks a lot! :·)

[Tina Stancheva]

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

[SEAFC]

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
URI: http://www.telerik.com/help/ScriptResource.axd?d=EcZL0t9ywZTrkubDSMgNl7L-0utRuAxkEGDjQtEmRLNtSuglgEfrl0rMxb2WIdE2TiTVZqOivByra--3UXdgTnmc1eHh0ZRutsHnfXQ6gIusykZDNNi0nbBvG0kigtfniV4JNnY37Z1WbP6-qnMcfLXS2CE1&t=fffffffff758529d


Mensaje: 'Telerik.Web.UI.RadTreeView' es nulo o no es un objeto
Línea: 521
Carácter: 9
Código: 0
URI: http://www.telerik.com/help/silverlight/raddocking-styles-and-templates-templating-the-raddocking.html


Mensaje: 'null' es nulo o no es un objeto
Línea: 176
Carácter: 19
Código: 0
URI: http://www.telerik.com/help/silverlight/raddocking-styles-and-templates-templating-the-raddocking.html

 
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.

[Tina Stancheva]

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

[SEAFC]

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.

[IsolatedStorage]

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>

[netra]

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>

[Petar Mladenov]

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