CODEWITHSUNDEEP
wpfstyles
Srikanth Alluri
Srikanth Alluri

Reputation: 133

Set background of parent based on Content Control's content

I have this tabitem (default style) template where the tab item's background is set to a fixed colour. 

<Style x:Key="tbitem" TargetType="{x:Type TabItem}">
        <Setter Property="Focusable" Value="True"/>
        <Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
        <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Continue"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border Name="Border" BorderBrush="Transparent" BorderThickness="0" CornerRadius="0" Margin="0" Background="Transparent" >
                        <DockPanel>
                            <Label   x:Name="TabLabel" DockPanel.Dock="Left" Foreground="White" FontWeight="ExtraBold" FontFamily="Segoe UI" FontSize="14" >
                                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  x:Name="ContentSite" RecognizesAccessKey="True" ContentSource="Header" />
                            </Label>
                            <Button Name="PART_BTNCLOSE" DockPanel.Dock="Right" Style="{StaticResource CloseButtonStyle}" Command="USD:ActionCommands.CloseSessionTab"/>
                        </DockPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100"/>
                            <Setter TargetName="Border" Property="BorderBrush" Value="Green"/>
                            <Setter TargetName="Border" Property="Background" Value="Green"/>
                            <Setter TargetName="Border" Property="Margin" Value="2,0,0,0"/>
                            <Setter TargetName="PART_BTNCLOSE" Property="Visibility" Value="{Binding CloseButtonVisibility}"/>
                            <Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
                            <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Continue"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="TabLabel" Property="Foreground" Value="#666666"/>
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And my actual tabitem contains a textblock to display the tab header 

<TabItem Style="{StaticResource SessionTabs}" >
                <TabItem.Header>
                    <TextBlock Text="Tab 1"  >

                    </TextBlock>

                </TabItem.Header>

            </TabItem>

All working good so far. The problem is.. yet times I have to change one of my tab colour based on some conditions and that If I'm doing it to my textblock then the look and feel is quite odd. enter image description here

Is there any way I can set my parent's border background to match my textblock's background? or somehow trigger/update ancestor's background from the child?

Upvotes: 0

Views: 321

Answers (1)

Ilya Grigoryan
Ilya Grigoryan

Reputation: 259

Set Label padding to 0 and change TabItemHeader like so:

<TabItem.Header>
   <Grid Background="Red" Margin="0 0 -10 0">
      <TextBlock Margin="5 5 15 5" Text="Tab 1"/>
   </Grid>
</TabItem.Header>

-10 is your button width and 15 is (5 + button.Width)

Upvotes: 1

Related Questions