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
