This is a migrated thread and some comments may be shown as answers.
Add close button to tab

2 Answers 130 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
CJ chavez asked on 20 May 2010, 05:59 PM
Hi guys this probably has been solved before, but im trying to add a "x" close button to the itemContainerStyle, but i realized that after i edit the template and running it, nothing changes, seems like any change i do to the template do not apply when i run it( I tried chaning backround and so on, but still stayed the same), any help its appretiated.Thanks.
    
            <!--ControlTemplate--> 
        
            <ControlTemplate x:Key="TabItemTemplate" TargetType="telerikNavigation:RadTabItem"> 
        
                        <Grid x:Name="wrapper"> 
        
                            <VisualStateManager.VisualStateGroups> 
        
                                <VisualStateGroup x:Name="CommonStateGroup"> 
        
                                    <VisualState x:Name="MouseOver"> 
        
                                        <Storyboard> 
        
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="Normal"/> 
        
                                    <VisualState x:Name="Selected"> 
        
                                        <Storyboard> 
        
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="SelectedMouseOver"> 
        
                                        <Storyboard> 
        
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/> 
        
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SelectionVisual"> 
        
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabItem_OuterBorder_SelectedMouseOver}"/> 
        
                                            </ObjectAnimationUsingKeyFrames> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="Disabled"> 
        
                                        <Storyboard> 
        
                                            <DoubleAnimation Duration="0:0:0.1" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement"/> 
        
                                            <DoubleAnimation Duration="0:0:0.1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                </VisualStateGroup> 
        
                                <VisualStateGroup x:Name="PlacementStates"> 
        
                                    <VisualState x:Name="HorizontalTop"/> 
        
                                    <VisualState x:Name="HorizontalLeft"> 
        
                                        <Storyboard> 
        
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform"> 
        
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
        
                                                    <DiscreteObjectKeyFrame.Value> 
        
                                                        <RotateTransform Angle="180"/> 
        
                                                    </DiscreteObjectKeyFrame.Value> 
        
                                                </DiscreteObjectKeyFrame> 
        
                                            </ObjectAnimationUsingKeyFrames> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="HorizontalRight"/> 
        
                                    <VisualState x:Name="HorizontalBottom"> 
        
                                        <Storyboard> 
        
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform"> 
        
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
        
                                                    <DiscreteObjectKeyFrame.Value> 
        
                                                        <RotateTransform Angle="180"/> 
        
                                                    </DiscreteObjectKeyFrame.Value> 
        
                                                </DiscreteObjectKeyFrame> 
        
                                            </ObjectAnimationUsingKeyFrames> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="VerticalTop"> 
        
                                        <Storyboard> 
        
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform"> 
        
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
        
                                                    <DiscreteObjectKeyFrame.Value> 
        
                                                        <RotateTransform Angle="-90"/> 
        
                                                    </DiscreteObjectKeyFrame.Value> 
        
                                                </DiscreteObjectKeyFrame> 
        
                                            </ObjectAnimationUsingKeyFrames> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="VerticalLeft"> 
        
                                        <Storyboard> 
        
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform"> 
        
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
        
                                                    <DiscreteObjectKeyFrame.Value> 
        
                                                        <RotateTransform Angle="90"/> 
        
                                                    </DiscreteObjectKeyFrame.Value> 
        
                                                </DiscreteObjectKeyFrame> 
        
                                            </ObjectAnimationUsingKeyFrames> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="VerticalRight"> 
        
                                        <Storyboard> 
        
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform"> 
        
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
        
                                                    <DiscreteObjectKeyFrame.Value> 
        
                                                        <RotateTransform Angle="-90"/> 
        
                                                    </DiscreteObjectKeyFrame.Value> 
        
                                                </DiscreteObjectKeyFrame> 
        
                                            </ObjectAnimationUsingKeyFrames> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                    <VisualState x:Name="VerticalBottom"> 
        
                                        <Storyboard> 
        
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform"> 
        
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
        
                                                    <DiscreteObjectKeyFrame.Value> 
        
                                                        <RotateTransform Angle="-90"/> 
        
                                                    </DiscreteObjectKeyFrame.Value> 
        
                                                </DiscreteObjectKeyFrame> 
        
                                            </ObjectAnimationUsingKeyFrames> 
        
                                        </Storyboard> 
        
                                    </VisualState> 
        
                                </VisualStateGroup> 
        
                                <VisualStateGroup x:Name="FocusStates"> 
        
                                    <VisualState x:Name="Unfocused"/> 
        
                                    <VisualState x:Name="Focused"/> 
        
                                </VisualStateGroup> 
        
                            </VisualStateManager.VisualStateGroups> 
        
                            <Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}" Margin="{StaticResource TabItem_Margin}"> 
        
                                <Border BorderBrush="{StaticResource TabItem_InnerBorder_Normal}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}" Background="#FFEFA4A4"/> 
        
                            </Border> 
        
                            <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource TabItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource TabItem_OuterBorderThickness}" Background="#FF8800FF" CornerRadius="{StaticResource TabItem_OuterCornerRadius}" Margin="{StaticResource TabItem_Margin}" Opacity="0"> 
        
                                <Border BorderBrush="{StaticResource TabItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/> 
        
                            </Border> 
        
                            <Border BorderBrush="#FFFFF500" BorderThickness="0 0 0 2" Background="Black"/> 
        
                            <Border x:Name="SelectionVisual" BorderBrush="{StaticResource TabItem_OuterBorder_Selected}" BorderThickness="{StaticResource TabItem_OuterBorderThickness}" Background="{StaticResource TabItem_Background_Selected}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}" Margin="{StaticResource TabItem_Margin_Selected}" Opacity="0"> 
        
                                <Border BorderBrush="{StaticResource TabItem_InnerBorder_Selected}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/> 
        
                            </Border> 
        
                            <Telerik_Windows_Controls_Primitives:LayoutTransformControl x:Name="OrientationTransform" Background="#FFA50C0C"> 
        
                                <ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" OpacityMask="Black"/> 
        
                            </Telerik_Windows_Controls_Primitives:LayoutTransformControl> 
        
                            <Button Content="Button" HorizontalAlignment="Right" Height="9" VerticalAlignment="Top" Width="14" Margin="0,-1,0,0"/> 
        
                        </Grid> 
        
                    </ControlTemplate> 
        
            <!-- Style --> 
        
            <Style x:Key="RadTabItemStyleWithButton" TargetType="telerikNavigation:RadTabItem"> 
        
                        <Setter Property="MinWidth" Value="5"/> 
        
                        <Setter Property="BorderThickness" Value="{StaticResource TabItem_OuterBorderThickness}"/> 
        
                        <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/> 
        
                        <Setter Property="MinHeight" Value="5"/> 
        
                        <Setter Property="Background" Value="{StaticResource TabItem_Background_Normal}"/> 
        
                        <Setter Property="BorderBrush" Value="{StaticResource TabItem_OuterBorder_Normal}"/> 
        
                        <Setter Property="HorizontalContentAlignment" Value="Center"/> 
        
                        <Setter Property="VerticalContentAlignment" Value="Center"/> 
        
                        <Setter Property="Padding" Value="6 3"/> 
        
                        <Setter Property="IsTabStop" Value="False"/> 
        
                        <Setter Property="Template" Value="{StaticResource TabItemTemplate}"/> 
        
                    </Style> 
        
            <!--TabControl--> 
        
            <telerikNavigation:RadTabControl   AllowDrop="True" AllowDragOverTab="True" AllowDragReorder="True"  x:Name="myTabs" Grid.Column="1" Margin="6,0,16,12" Grid.Row="1" ItemContainerStyle="{StaticResource RadTabItemStyleWithButton}"> 
        
            </telerikNavigation:RadTabControl>
2 Answers, 1 is accepted

answered on 21 May 2010, 05:35 PM
311814-tabcontrolexample.zip
Hi CJ chavez,

I couldn't reproduce the issue you described.

Can you take a look at the project I used for testing and let me know if ti works for you? If it doesn't illustrate your scenario correctly, can you please modify it accordingly?

Thank you in advance.

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