开发者

WPF TabItem Style with image

I have a TabControl with TabItems, The TabItems 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜