HeaderTemplate changes in 2009 Q1?

11 posts, 2 answers
  1. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 16 Mar 2009 Link to this post

    Hi,

    I've been using the 2008 Q3 release of the Telerik Silverlight controls and have hit a snag after updating to the 2009 Q1 release in that none of my tempates that apply to RadTabControl/RadTabItems seem to work?

    One of the templates I've been using (with a TabControl bound to a collection of objects) is shown below:
    <teleriknav:RadTabControl TabStripPlacement="Top" BackgroundVisibility="Collapsed" HorizontalAlignment="Left" Grid.Row="1" x:Name="tabOpenWindows" AllowDragReorder="True"
                <teleriknav:RadTabControl.ItemContainerStyle> 
                    <!--The style that will be applied to all the items--> 
                    <Style TargetType="teleriknav:RadTabItem"
                        <!--Content Template (it could include a content presenter which will display everything)--> 
                        <!--<Setter Property="ContentTemplate" Value="{StaticResource contentDataTemplate}" />--> 
                        <!--Setting the template for the headers.--> 
                        <Setter Property="HeaderTemplate"
                            <Setter.Value> 
                                <DataTemplate> 
                                    <Grid Margin="3"
                                        <Grid.ColumnDefinitions> 
                                            <ColumnDefinition Width="Auto" /> 
                                            <ColumnDefinition Width="*" /> 
                                            <ColumnDefinition Width="Auto" /> 
                                        </Grid.ColumnDefinitions> 
                                        <Image Source="{Binding IconSource}" /> 
                                        <TextBlock Text="{Binding PageTitleAbbreviated}" Cursor="Hand" ToolTipService.ToolTip="{Binding PageTitle}" Grid.Column="1" Style="{StaticResource TabText}" Margin="5 0 5 0" VerticalAlignment="Center"  MouseLeftButtonUp="ClickTab" /> 
                                        <Button VerticalAlignment="Center" ToolTipService.ToolTip="Close"  Grid.Column="2" Margin="2,0,2,0" Width="20" Height="20" Cursor="Hand" Template="{StaticResource CloseButtonTemplate}" Click="TabCloseClick"/> 
                                    </Grid> 
                                </DataTemplate> 
                            </Setter.Value> 
                        </Setter> 
                    </Style> 
                </teleriknav:RadTabControl.ItemContainerStyle> 
            </teleriknav:RadTabControl> 

    Programmatically adding the RadTabItem (and defining its header/content) works, however.

    Am I doing something wrong here?

    Thanks in advance,
    Richard
  2. Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 16 Mar 2009 Link to this post

    Hello Richard,

    Sorry for the cause inconvenience. This is bug that happened when we changed the default theme to be Office_Black. We will fix it for the next service pack. As a workaround you can use this following style for RadTabItem with fixed control template (we missed to bind the ContentTemplate property to HeadetTemplate):

    <UserControl x:Class="SilverlightDockingDemo.Page55" 
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
            xmlns:teleriknav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" 
            xmlns:telerikNavigationPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls.Navigation" 
            Width="400" Height="300" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">  
        <UserControl.Resources> 
            <SolidColorBrush x:Key="BorderInnerBrush" Color="#FF979994"/>  
            <RadialGradientBrush x:Key="TabBackground_MouseOver" GradientOrigin="0.499,0.91">  
                <RadialGradientBrush.RelativeTransform> 
                    <TransformGroup> 
                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.26" ScaleY="2.26"/>  
                        <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>  
                        <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </RadialGradientBrush.RelativeTransform> 
                <GradientStop Color="#FF93938A" Offset="0.77744242487754"/>  
                <GradientStop Color="#FF827354" Offset="0.56855880419204341"/>  
                <GradientStop Color="#FF7A6142" Offset="0.41537027548504035"/>  
                <GradientStop Color="#FFBF9318" Offset="0.17868114889097064"/>  
            </RadialGradientBrush> 
            <LinearGradientBrush x:Key="TabBorder_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">  
                <GradientStop Color="#FF949491" Offset="0"/>  
                <GradientStop Color="#FF9C948F" Offset="1"/>  
            </LinearGradientBrush> 
            <LinearGradientBrush x:Key="TabBorder_Select" EndPoint="0.5,1" StartPoint="0.5,0">  
                <GradientStop Color="#FFA4A4A4" Offset="0"/>  
                <GradientStop Color="#FF72C8D0" Offset="1"/>  
            </LinearGradientBrush> 
            <LinearGradientBrush x:Key="TabBackground_Select" EndPoint="0.5,1" StartPoint="0.5,0">  
                <GradientStop Color="#FFF3F4F6" Offset="0"/>  
                <GradientStop Color="#FFCED3D9" Offset="1"/>  
            </LinearGradientBrush> 
            <ControlTemplate x:Key="TabItemLeftTemplate" TargetType="teleriknav:RadTabItem">  
                <Grid x:Name="wrapper">  
                    <vsm:VisualStateManager.VisualStateGroups> 
                        <vsm:VisualStateGroup x:Name="CommonStateGroup">  
                            <vsm:VisualState x:Name="MouseOver">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Normal"/>  
                            <vsm:VisualState x:Name="Selected">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="BorderBrush">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBorder_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBackground_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="wrapper" Storyboard.TargetProperty="Margin">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0 0 -1 0"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Foreground">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#FF000000"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Disabled">  
                                <Storyboard> 
                                    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Opacity" To="0.5"/>  
                                </Storyboard> 
                            </vsm:VisualState> 
                        </vsm:VisualStateGroup> 
                        <vsm:VisualStateGroup x:Name="FocusStates">  
                            <vsm:VisualState x:Name="Unfocused"/>  
                            <vsm:VisualState x:Name="Focused"/>  
                        </vsm:VisualStateGroup> 
                    </vsm:VisualStateManager.VisualStateGroups> 
                    <Border Margin="0 2" x:Name="Bg" Background="{StaticResource TabBackground_MouseOver}" BorderBrush="{StaticResource TabBorder_MouseOver}" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3" Opacity="0"/>  
                    <Grid x:Name="HeaderWrapper">  
                        <telerikNavigationPrimitives:TabItemContentPresenter   
                            Foreground="{TemplateBinding Foreground}"   
                            HorizontalAlignment="Center"   
                            Margin="{TemplateBinding Padding}"   
                            x:Name="HeaderElement"   
                            VerticalAlignment="Center" 
                            ContentTemplate="{TemplateBinding HeaderTemplate}" 
                            Content="{TemplateBinding Header}"/>  
                    </Grid> 
                </Grid> 
            </ControlTemplate> 
            <ControlTemplate x:Key="TabItemTopTemplate" TargetType="teleriknav:RadTabItem">  
                <Grid x:Name="wrapper">  
                    <vsm:VisualStateManager.VisualStateGroups> 
                        <vsm:VisualStateGroup x:Name="CommonStateGroup">  
                            <vsm:VisualState x:Name="MouseOver">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Normal"/>  
                            <vsm:VisualState x:Name="Selected">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="BorderBrush">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBorder_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBackground_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="wrapper" Storyboard.TargetProperty="Margin">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0 0 0 -1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Foreground">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#FF000000"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Disabled">  
                                <Storyboard> 
                                    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Opacity" To="0.5"/>  
                                </Storyboard> 
                            </vsm:VisualState> 
                        </vsm:VisualStateGroup> 
                        <vsm:VisualStateGroup x:Name="FocusStates">  
                            <vsm:VisualState x:Name="Unfocused"/>  
                            <vsm:VisualState x:Name="Focused"/>  
                        </vsm:VisualStateGroup> 
                    </vsm:VisualStateManager.VisualStateGroups> 
                    <Border Margin="2 0" x:Name="Bg" Background="{StaticResource TabBackground_MouseOver}" BorderBrush="{StaticResource TabBorder_MouseOver}" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" Opacity="0"/>  
                    <telerikNavigationPrimitives:TabItemContentPresenter Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" x:Name="HeaderElement" VerticalAlignment="Center" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>  
                </Grid> 
            </ControlTemplate> 
            <ControlTemplate x:Key="TabItemBottomTemplate" TargetType="teleriknav:RadTabItem">  
                <Grid x:Name="wrapper">  
                    <vsm:VisualStateManager.VisualStateGroups> 
                        <vsm:VisualStateGroup x:Name="CommonStateGroup">  
                            <vsm:VisualState x:Name="MouseOver">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Normal"/>  
                            <vsm:VisualState x:Name="Selected">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="BorderBrush">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBorder_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBackground_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="wrapper" Storyboard.TargetProperty="Margin">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0 -1 0 0"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Foreground">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#FF000000"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Disabled">  
                                <Storyboard> 
                                    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Opacity" To="0.5"/>  
                                </Storyboard> 
                            </vsm:VisualState> 
                        </vsm:VisualStateGroup> 
                        <vsm:VisualStateGroup x:Name="FocusStates">  
                            <vsm:VisualState x:Name="Unfocused"/>  
                            <vsm:VisualState x:Name="Focused"/>  
                        </vsm:VisualStateGroup> 
                    </vsm:VisualStateManager.VisualStateGroups> 
                    <Border Margin="2 0" x:Name="Bg" Background="{StaticResource TabBackground_MouseOver}" BorderBrush="{StaticResource TabBorder_MouseOver}" BorderThickness="1,0,1,1" CornerRadius="0,0,3,3" Opacity="0"/>  
                    <Grid x:Name="HeaderWrapper">  
                        <telerikNavigationPrimitives:TabItemContentPresenter Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" x:Name="HeaderElement" VerticalAlignment="Center" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>  
                    </Grid> 
                </Grid> 
            </ControlTemplate> 
            <ControlTemplate x:Key="TabItemRightTemplate" TargetType="teleriknav:RadTabItem">  
                <Grid x:Name="wrapper">  
                    <vsm:VisualStateManager.VisualStateGroups> 
                        <vsm:VisualStateGroup x:Name="CommonStateGroup">  
                            <vsm:VisualState x:Name="MouseOver">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Normal"/>  
                            <vsm:VisualState x:Name="Selected">  
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="BorderBrush">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBorder_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBackground_Select}"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="wrapper" Storyboard.TargetProperty="Margin">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="-1 0 0 0"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Foreground">  
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#FF000000"/>  
                                    </ObjectAnimationUsingKeyFrames> 
                                </Storyboard> 
                            </vsm:VisualState> 
                            <vsm:VisualState x:Name="Disabled">  
                                <Storyboard> 
                                    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Opacity" To="0.5"/>  
                                </Storyboard> 
                            </vsm:VisualState> 
                        </vsm:VisualStateGroup> 
                        <vsm:VisualStateGroup x:Name="FocusStates">  
                            <vsm:VisualState x:Name="Unfocused"/>  
                            <vsm:VisualState x:Name="Focused"/>  
                        </vsm:VisualStateGroup> 
                    </vsm:VisualStateManager.VisualStateGroups> 
                    <Border Margin="0 2" x:Name="Bg" Background="{StaticResource TabBackground_MouseOver}" BorderBrush="{StaticResource TabBorder_MouseOver}" BorderThickness="0,1,1,1" CornerRadius="0,3,3,0" Opacity="0"/>  
                    <Grid x:Name="HeaderWrapper">  
                        <telerikNavigationPrimitives:TabItemContentPresenter Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Margin="{TemplateBinding Padding}" x:Name="HeaderElement" VerticalAlignment="Stretch" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>  
                    </Grid> 
                </Grid> 
            </ControlTemplate> 
            <Style x:Key="RadTabItemStyle1" TargetType="teleriknav:RadTabItem">  
                <Setter Property="MinWidth" Value="5"/>  
                <Setter Property="BorderThickness" Value="1"/>  
                <Setter Property="MinHeight" Value="5"/>  
                <Setter Property="BorderBrush" Value="{StaticResource BorderInnerBrush}"/>  
                <Setter Property="HorizontalContentAlignment" Value="Center"/>  
                <Setter Property="VerticalContentAlignment" Value="Center"/>  
                <Setter Property="Cursor" Value="Arrow"/>  
                <Setter Property="IsEnabled" Value="True"/>  
                <Setter Property="Margin" Value="0 0 0 0"/>  
                <Setter Property="Padding" Value="6,1,6,1"/>  
                <Setter Property="IsTabStop" Value="True"/>  
                <Setter Property="Template" Value="{StaticResource TabItemLeftTemplate}"/>  
                <Setter Property="TopTemplate" Value="{StaticResource TabItemTopTemplate}"/>  
                <Setter Property="BottomTemplate" Value="{StaticResource TabItemBottomTemplate}"/>  
                <Setter Property="RightTemplate" Value="{StaticResource TabItemRightTemplate}"/>  
                <Setter Property="LeftTemplate" Value="{StaticResource TabItemLeftTemplate}"/>  
                <Setter Property="Foreground" Value="#FFFFFFFF"/>  
                <Setter Property="HeaderTemplate">  
                    <Setter.Value> 
                        <DataTemplate> 
                            <Grid Margin="3">  
                                <Grid.ColumnDefinitions> 
                                    <ColumnDefinition Width="Auto" /> 
                                    <ColumnDefinition Width="*" /> 
                                    <ColumnDefinition Width="Auto" /> 
                                </Grid.ColumnDefinitions> 
                                <!--<Image Source="{Binding IconSource}" />--> 
                                <TextBlock Text="{Binding Path=Header}" Cursor="Hand" 
                                        ToolTipService.ToolTip="{Binding Path=Int}" Grid.Column="1" 
                                        Margin="5 0 5 0" VerticalAlignment="Center" /> 
                                <Button VerticalAlignment="Center" ToolTipService.ToolTip="Close" 
                                        Grid.Column="2" Margin="2,0,2,0" Width="20" Height="20" 
                                        Cursor="Hand" /> 
                            </Grid> 
                        </DataTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
        </UserControl.Resources> 
        <Grid x:Name="LayoutRoot" Background="White">  
            <teleriknav:RadTabControl TabStripPlacement="Top" BackgroundVisibility="Collapsed" 
                    HorizontalAlignment="Left" Grid.Row="1" x:Name="tabOpenWindows" 
                    AllowDragReorder="True" ItemContainerStyle="{StaticResource RadTabItemStyle1}" /> 
     
        </Grid> 
    </UserControl> 

    Do not hesitate to contact us if you find some other obstacles with the Q1 release.
    I've updated your telerik points.

    Greetings,
    Hristo
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. DevCraft banner
  4. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 17 Mar 2009 Link to this post

    Thanks for the quick response, Hristo. I've applied the fix suggested but unfortunately it still doesn't work - if I view the XAML in Visual Studio 2008 (with ReSharper installed), the DataTemplate definition within the HeaderTemplate is greyed out and I get a tooltip telling me that the resource is never used.

    It appears that the DataTemplate tag isn't being supported?
  5. Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 17 Mar 2009 Link to this post

    Hello Richard,

    I have changed the HeaderTemplate to match my DataItems. Please replace it with your header template:
    <Setter Property="HeaderTemplate">  
        <Setter.Value> 
            <DataTemplate> 
                <Grid Margin="3">  
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="Auto" /> 
                        <ColumnDefinition Width="*" /> 
                        <ColumnDefinition Width="Auto" /> 
                    </Grid.ColumnDefinitions> 
                    <!--<Image Source="{Binding IconSource}" />--> 
                    <TextBlock Text="{Binding Path=Header}" Cursor="Hand" 
                            ToolTipService.ToolTip="{Binding Path=Int}" Grid.Column="1" 
                            Margin="5 0 5 0" VerticalAlignment="Center" /> 
                    <Button VerticalAlignment="Center" ToolTipService.ToolTip="Close" 
                            Grid.Column="2" Margin="2,0,2,0" Width="20" Height="20" 
                            Cursor="Hand" /> 
                </Grid> 
            </DataTemplate> 
        </Setter.Value> 
    </Setter> 

    and let me know if it works.
    Thanks.

    All the best,
    Hristo
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 17 Mar 2009 Link to this post

    I noticed that and changed it accordingly - still no luck.

    The template I'm using is:

    <Setter Property="HeaderTemplate">   
                    <Setter.Value>  
                       <DataTemplate> 
                                    <Grid Margin="3"
                                        <Grid.ColumnDefinitions> 
                                            <ColumnDefinition Width="Auto" /> 
                                            <ColumnDefinition Width="*" /> 
                                            <ColumnDefinition Width="Auto" /> 
                                        </Grid.ColumnDefinitions> 
                                        <Image Source="{Binding IconSource}" /> 
                                        <TextBlock Text="{Binding PageTitleAbbreviated}" Cursor="Hand" ToolTipService.ToolTip="{Binding PageTitle}" Grid.Column="1" Style="{StaticResource TabText}" Margin="5 0 5 0" VerticalAlignment="Center"  /> 
                                        <Button VerticalAlignment="Center" ToolTipService.ToolTip="Close"  Grid.Column="2" Margin="2,0,2,0" Width="20" Height="20" Cursor="Hand" Template="{StaticResource PortletCloseButtonTemplate}" /> 
                                    </Grid> 
                                </DataTemplate> 
                    </Setter.Value>  
                </Setter>  

  7. Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 18 Mar 2009 Link to this post

    Hello Richard,

    The style that I've pasted should work (at least it is working in my project).
    Can you send us sample project so we can investigate it further?
    Thanks.

    Sincerely yours,
    Hristo
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 20 Mar 2009 Link to this post

    Hi Hristo,

    Sorry for the slowness replying - have been caught up with other things. I will investigate this further and if still have no luck will send you an example project.

    Thanks,
    Richard
  9. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 23 Mar 2009 Link to this post

    Hi Hristo,

    The example solution can be found at TelerikTest.zip

    Please let me know if I'm doing something wrong there - still feel there's something up with the RadTabItem/Panel.

    Many thanks,
    Richard
  10. Answer
    Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 24 Mar 2009 Link to this post

    Hello Richard,

    I am sorry for the delayed reply, 

    After looking at your example and I noticed that the TabItem style was not applied. When I changed the TabControl definition to this, it fixed the problem:

    <telerikNavigation:RadTabControl HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            ItemsSource="{Binding Path=Tabs, Source={StaticResource DesignDataDS}}" 
            ItemContainerStyle="{StaticResource RadTabItemStyle1}" /> 

    I.e. the ItemContainerStyle had to be added. Setting ItemContainerStyle means that you apply this style to all the container items of the control, when bound. If you define your items in xaml, you can apply the style directly to the TabItems.

    I noticed you are possibly trying to implement the close functionality, there is a thread here where a solution using routed events (for the click event handling) is discussed:

    http://www.telerik.com/community/forums/silverlight/tabcontrol/how-to-close-the-tab.aspx

    Again, sorry for this issue. We will make sure that these kind of omissions do not happen in th future.

    Hopefully this will work for you,

    Kind regards,
    Miroslav
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  11. Richard
    Richard avatar
    9 posts
    Member since:
    Jan 2009

    Posted 25 Mar 2009 Link to this post

    Works perfectly - thanks, Hristo!!

    One last thing... :)  Which template do I use to set the body/content of the TabItem?

    Regards,
    Rich
  12. Answer
    Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 26 Mar 2009 Link to this post

    Hi Richard,

    If you are binding the TabControl, you can use the ContentTemplate property of the TabItem  to change this template. (This can be set in the style of the RadTabItem).

    Please come back to us if you need more help with this.

    Regards,
    Miroslav
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Back to Top
DevCraft banner