Hi!

I want to create a custom tabcontrol class which has an icon before the text, and I want to be able to change the icon in the constructor of the new tabcontrol.

I use implicit styles in Silverlight 4, and the custom tabcontrol should not have any xaml of its own, just the class and the implicit xaml style in my App.xaml.

I cannot, however, get this to work.

This is my code:

    <!-- Style for generic tabcontrols -->

20,0,0,0

<Style TargetType="controls:TabItem">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Background" Value="#FFDBEDFB"/>
        <Setter Property="BorderBrush" Value="#FFA3AEB9"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="6,2,6,2"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="MinWidth" Value="5"/>
        <Setter Property="MinHeight" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:TabItem">
                    <Grid x:Name="Root" Cursor="Hand" Height="25">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0"/>
                                    <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualTop" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTopSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTopUnSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualTop" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="TemplateTopUnselected" Margin="1">
                            <Border x:Name="BorderTop" BorderThickness="1,1,1,0">
                                <Border x:Name="GradientTop" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFB1CCEE" Offset="0"/>
                                            <GradientStop Color="#CCB1CCEE" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFCEE0F7" Offset="0.091"/>
                                            <GradientStop Color="#FFDEECFD" Offset="0.996"/>
                                            <GradientStop Color="White"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid Margin="3,3,3,2">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="16"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="16"/>
                                            <ColumnDefinition/>
                                            <ColumnDefinition Width="15"/>
                                        </Grid.ColumnDefinitions>
                                        <Image x:Name="TabInactiveIcon" Source="group.png" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.395"/>
                                        <ContentControl x:Name="HeaderTopUnselected" Cursor="{TemplateBinding Cursor}" Margin="3,0" FontSize="{TemplateBinding FontSize}" Foreground="#FF416AA3" IsTabStop="False" FontFamily="Tahoma" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        <Button x:Name="TabInactiveCloseButton" Template="{StaticResource TabItemCloseButton}" Cursor="Hand" Height="10" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Top" Width="10" Content="Button" Grid.Column="2" d:LayoutOverrides="GridBox"/>
                                    </Grid>
                                </Border>
                            </Border>
                            <Border x:Name="DisabledVisualTopUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
                        </Grid>
                        <Border x:Name="FocusVisualElement" Margin="-1" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1" CornerRadius="3,3,0,0"/>
                        <Grid x:Name="TemplateTopSelected" Margin="0,0,0,-3" Visibility="Collapsed">
                            <Border x:Name="BorderTop1" BorderThickness="1,1,1,0">
                                <Border x:Name="GradientTop1" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFB1CCEE" Offset="0"/>
                                            <GradientStop Color="#CAB1CCEE" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFCEE0F7" Offset="0.091"/>
                                            <GradientStop Color="White" Offset="0.974"/>
                                            <GradientStop Color="White"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid Margin="3,3,3,2">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="16"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="16"/>
                                            <ColumnDefinition/>
                                            <ColumnDefinition Width="15"/>
                                        </Grid.ColumnDefinitions>
                                        <Image x:Name="TabActiveIcon" Source="user.png" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        <ContentControl x:Name="HeaderTopSelected" Cursor="{TemplateBinding Cursor}" Margin="3,0" FontSize="{TemplateBinding FontSize}" Foreground="#FF416AA3" IsTabStop="False" FontFamily="Tahoma" FontWeight="Bold" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        <Button x:Name="TabActiveCloseButton" Template="{StaticResource TabActiveCloseButton}" Cursor="Hand" Height="10" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Top" Width="10" Content="Button" Grid.Column="2" d:LayoutOverrides="GridBox"/>
                                    </Grid>
                                </Border>
                            </Border>
                            <Border x:Name="FocusVisualTop" Margin="-2,-2,-2,0" IsHitTestVisible="false" Visibility="Collapsed" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0"/>
                            <Border x:Name="DisabledVisualTopSelected" Margin="-2,-2,-2,0" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

and my class

public class ClosableTabItem : TabItem
{
    public static readonly DependencyProperty TabIconProperty =
        DependencyProperty.RegisterAttached("TabInactiveIcon", typeof(Image), typeof(ClosableTabItem), null);




    public Image TabIcon
    {
        get { return (Image)GetValue(ClosableTabItem.TabIconProperty); }
        set { SetValue(ClosableTabItem.TabIconProperty, value); }
    }

    public ClosableTabItem(string header, ContentControl content, TabItemIcons icon)
    {
        // I need to be able to set the header, content and icon here           
    }

    private Image GetTabIcon(TabItemIcons icon)
    {
        Image img = new Image();
        switch (icon)
        {
            case TabItemIcons.User:
                img.Source = new BitmapImage(new Uri("/icons/user.png", UriKind.Relative));
                break;
            case TabItemIcons.Group:
                img.Source = new BitmapImage(new Uri("/icons/group.png", UriKind.Relative));
                break;
            default:
                break;
        }
        return img;
    }

}

This is driving me nuts, and I can't find any examples where anyone has done this without having a xaml page for the custom tab. Is this even possible? Can someone point me in the right direction?

Cheers! - jonah