Brainfuck
Brainfuck

Reputation: 13

WPF: How to share an attached property between a TabControl and a TabItem in a ResourceDictionary?

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

Answers (0)

Related Questions