[Solved] RadControls Silverlight Courseware - ScovilleTabs Style isn't being applied?

[David]

Hi,

I'm working through the RadControls Silverlight Courseware.  04_Templates project in Tabbed solution isn't working as described.
The ScovilleTabs style isn't being applied. 

Please explain.

Best Wishes,
Dave.

<UserControl xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
             x:Class="_04_Templates.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignWidth="640"
             d:DesignHeight="480">
    <UserControl.Resources>
        <Style x:Key="ScovilleTabs"
               TargetType="telerikNavigation:RadTabItem">
            <Setter Property="TopTemplate">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikNavigation:RadTabItem">
                        <Grid>
                            <Ellipse>
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="Red"
                                                      Offset="0.1"></GradientStop>
                                        <GradientStop Color="DarkRed"
                                                      Offset="0.5"></GradientStop>
                                        <GradientStop Color="Maroon"
                                                      Offset=".7"></GradientStop>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter Margin="10"
                                              Content="{TemplateBinding Content}"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <telerikNavigation:RadTabControl TabStripPlacement="Top"
                                         ItemContainerStyle="{StaticResource ScovilleTabs}">
            <telerikNavigation:RadTabItem Content="Very Spicy"
                                          Header="Very Spicy"></telerikNavigation:RadTabItem>
            <telerikNavigation:RadTabItem Content="Hot"
                                          Header="Hot"></telerikNavigation:RadTabItem>
            <telerikNavigation:RadTabItem Content="Mild"
                                          Header="Mild" DropDownContent="dfdf"></telerikNavigation:RadTabItem>
        </telerikNavigation:RadTabControl>
    </Grid>
</UserControl>

[Tina Stancheva]

Hello David,

Thank you for reporting the issue. It seems that the project doesn't illustrate correctly the example in the 11.5 Customization tutorial of the .pdf courseware. The issue is caused by the ScovilleTabs Style, which should look like this:

<Style x:Key="ScovilleTabs"
    TargetType="telerikNavigation:RadTabItem">
    <Setter Property="TopTemplate">
        <Setter.Value>
            <ControlTemplate TargetType="telerikNavigation:RadTabItem">
                <Grid x:Name="wrapper">
                    <Ellipse>
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Color="Red"
                                    Offset="0.1">
                                </GradientStop>
                                <GradientStop Color="DarkRed"
                                                        Offset="0.5">
                                </GradientStop>
                                <GradientStop Color="Maroon"
                                                        Offset=".7">
                                </GradientStop>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                                                            <Telerik_Windows_Controls_Primitives:TabItemContentPresenter                            x:Name="HeaderElement"
                    Content="{TemplateBinding Header}"
                    Foreground="White"
                    Margin="10"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I also attached a project illustrating this scenario using our latest binaries.

Thank you again for the feedback. We will update the project accordingly as soon as possible. I also updated your Telerik points.

Greetings,
Tina Stancheva
the Telerik team