垂直选项卡，图像和文本作为标题

Question

我需要创建一个如下所示的标签。

使用如下代码我得到了一些附近的东西。

<TabControl Margin="-2,0,0,0"  Background="#37e8f9" BorderBrush="Red" BorderThickness="0" TabStripPlacement="Left" HorizontalAlignment="Left" Width="261" >
            <TabControl.Resources>
                <Style TargetType="TabItem">

                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <Border Name="Border" BorderThickness="1" BorderBrush="Transparent" CornerRadius="5,0,0,5" Margin="10,0,-1,0" >

                                            <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header" Width="100" TextBlock.TextAlignment="Center" TextBlock.LineHeight="100" TextBlock.LineStackingStrategy="BlockLineHeight" MaxHeight="100"

                                    />

                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Foreground" Value="#805e00" />
                                        <Setter Property="FontSize" Value="14" />
                                        <Setter Property="Padding" Value="12,10"/>

                                        <Setter TargetName="Border" Property="Background" Value="#37e8f9" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter Property="Foreground" Value="Red" />
                                        <Setter Property="FontSize" Value="14" />
                                        <Setter Property="Padding" Value="12,10"/>
                                        <Setter Property="Background" Value="Red" />
                                    </Trigger>
                                    <MultiTrigger>

                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsMouseOver" Value="True" />
                                            <Condition Property="IsSelected" Value="False" />
                                        </MultiTrigger.Conditions>

                                        <Setter TargetName="Border" Property="BorderBrush" Value="White" />
                                    </MultiTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

            </TabControl.Resources>
            <TabItem Header="Tab 1" />
            <TabItem Header="Tab 2" />
            <TabItem Header="Tab 3" />

输出如下。

现在，如果我添加图像，标签标题区域将无法在图像上和整个标题中点击;除了可点击的标题文本。如何使用图像和文本在其中单击整个标题区域？

提前致谢。

Answer 1

试试这个Style：

<Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Border Name="Border" BorderThickness="1" BorderBrush="Transparent" CornerRadius="5,0,0,5" Margin="10,0,-1,0" >
                                    <StackPanel>
                                    <Image Source="Image_Source"/>
                                    <ContentPresenter x:Name="ContentSite"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                ContentSource="Header" TextBlock.TextAlignment="Center"  TextBlock.LineStackingStrategy="BlockLineHeight"
                                />
                                    </StackPanel>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Foreground" Value="#805e00" />
                                    <Setter Property="FontSize" Value="14" />
                                    <Setter Property="Padding" Value="12,10"/>

                                    <Setter TargetName="Border" Property="Background" Value="#37e8f9" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter Property="Foreground" Value="Red" />
                                    <Setter Property="FontSize" Value="14" />
                                    <Setter Property="Padding" Value="12,10"/>
                                    <Setter Property="Background" Value="Red" />
                                </Trigger>
                                <MultiTrigger>

                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsMouseOver" Value="True" />
                                        <Condition Property="IsSelected" Value="False" />
                                    </MultiTrigger.Conditions>

                                    <Setter TargetName="Border" Property="BorderBrush" Value="White" />
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>