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 -->
<Style TargetType="controls:TabControl">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFEFEFE" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TabControl">
<Grid>
<Grid.Resources>
<Storyboard x:Name="ChangeMargin">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabPanelTop" Storyboard.TargetProperty="(FrameworkElement.Margin)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000">
<DiscreteObjectKeyFrame.Value>
<Thickness>20,0,0,0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard/>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTop" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="TemplateTop" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Margin="0" BorderThickness="1,0" Padding="0,0,0,2" BorderBrush="#FF9DA9B5" Background="#FFBFDFFF">
<ScrollViewer Style="{StaticResource TabScroller}" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" BorderThickness="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" BorderBrush="{x:Null}" Foreground="{x:Null}">
<primitives:TabPanel x:Name="TabPanelTop" Canvas.ZIndex="1" Margin="0" Background="{StaticResource TabHeaderBackground}"/>
</ScrollViewer>
</Border>
<Border MinHeight="10" MinWidth="10" Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,3,3">
<ContentPresenter x:Name="ContentTop" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Border>
<Border x:Name="DisabledVisualTop" IsHitTestVisible="False" Opacity="0" Grid.Row="1" Grid.RowSpan="2" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="0,0,3,3"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<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