WPF TabItem Style with image
I have a TabControl
with TabItem
s, The TabItem
s have text and an icon. To do this I have to add a StackPanel
to the TabItem
.
However, once I add the StackPanel
, I can no longer control the default style of the text.
Resource:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="tabItem">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Name="tabItemStyle" Background="Transparent" BorderBrush="Transparent" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" SnapsToDevicePixels="True" Margin="0, 0, 5, 0">
<ContentPresenter x:Name="ContentSite" TextBlock.Foreground="White" TextBlock.FontWeight="Bold" V开发者_高级运维erticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="14,3,18,3">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tabItemStyle" Property="Background" Value="#ecf3f9" />
<Setter TargetName="tabItemStyle" Property="BorderBrush" Value="#29458e" />
<Setter TargetName="tabItemStyle" Property="BorderThickness" Value="1,1,1,0" />
<Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="#29458e" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="tabItemStyle" Property="Background" Value="#6381be" />
<Setter TargetName="tabItemStyle" Property="BorderBrush" Value="#97acd4" />
<Setter TargetName="tabItemStyle" Property="BorderThickness" Value="1,1,1,0" />
</MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TabItem:
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image VerticalAlignment="Center" Source="/images/icons/_24/reports.png" Width="24" />
<TextBlock VerticalAlignment="Center" Margin="5, 0" >Reports</TextBlock>
</StackPanel>
</TabItem.Header>
</TabItem>
The relevant line is the ContentPresenter
in the Resource (Style). The TextBlock.Foreground="White"
no longer works. I can see why but cannot find out how else to do this. Any ideas?
Simply set the relevant properties on the actual TabItem
. For instance, notice if you put the following at the top of the style:
<Setter Property="Foreground" Value="Red" />
the text still changes. You don't need to refer to the ContentPresenter
's TextBlock
, and even if you did, you could apply TemplateBindings
to its properties so that when TabItem
's properties changed, so did ContentPresenter
's.
精彩评论