Reputation: 13
I have created a style for a TabControl and a TabItem. The TabControl has 3 colour properties attached so that they can be set individually for each instance of a TabControl. The TabItems of the TabControl must share the attached colour properties of the TabControl style to ensure a consistent appearance of the entire tab control. The attached colour properties of the TabControl do work but I cannot get the TabItem to use the same colours. I can't use resources for the shared colours because the colours can be different for each instance of a TabControl. Maybe there is a simple solution that I haven't found.
Attached colour properties in the TabControl style:
<Setter Property="local:TabCtrlProperties.HeaderPanelTopColor" Value="{StaticResource Color.Black32}" />
<Setter Property="local:TabCtrlProperties.HeaderPanelBottomColor" Value="{StaticResource Color.Black16}" />
<Setter Property="local:TabCtrlProperties.ContentPanelBottomColor" Value="{StaticResource Color.Black08}" />
Binding example:
<GradientStop Color="{Binding Path=(local:TabCtrlProperties.ContentPanelBottomColor), RelativeSource={RelativeSource TemplatedParent}}" Offset="1" />
What should the binding in TabItem look like?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:PkaDeviceConfig">
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="local:TabCtrlProperties.HeaderPanelTopColor" Value="{StaticResource Color.Black32}" />
<Setter Property="local:TabCtrlProperties.HeaderPanelBottomColor" Value="{StaticResource Color.Black16}" />
<Setter Property="local:TabCtrlProperties.ContentPanelBottomColor" Value="{StaticResource Color.Black08}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFAAAAAA" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TabPanel x:Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,4,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
<Border x:Name="Border" Grid.Row="1" BorderThickness="1" CornerRadius="2" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{Binding Path=(local:TabCtrlProperties.HeaderPanelBottomColor), RelativeSource={RelativeSource TemplatedParent}}" Offset="0" />
<GradientStop Color="{Binding Path=(local:TabCtrlProperties.ContentPanelBottomColor), RelativeSource={RelativeSource TemplatedParent}}" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="local:TabCtrlProperties.HeaderPanelTopColor" Value="{StaticResource Color.Black32}" />
<Setter Property="local:TabCtrlProperties.HeaderPanelBottomColor" Value="{StaticResource Color.Black16}" />
<Setter Property="local:TabCtrlProperties.ContentPanelBottomColor" Value="{StaticResource Color.Black08}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{Binding Path=(local:TabCtrlProperties.ContentPanelBottomColor), RelativeSource={RelativeSource Self}}" />
</ColorAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0" Value="1,1,1,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Yellow" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Yellow" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Margin="0,0,-4,0" BorderThickness="1,1,1,1" CornerRadius="2,12,0,0">
<Border.BorderBrush>
<SolidColorBrush Color="Black" />
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{Binding Path=HeaderPanelTopColor, RelativeSource={RelativeSource Self}}" Offset="0.0" />
<GradientStop Color="{Binding Path=HeaderPanelBottomColor, RelativeSource={RelativeSource Self}}" Offset="0.5" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Upvotes: 1
Views: 68