WPF自定义选项卡控件模板

我正在尝试实现此选项卡的设计：

从设计上我可以看出

• 选项卡标题由

  图像+文本+底部的
  条组成

• 所选选项卡标题应为：Border.Background=绿色，Text.Foreground=绿色
• 其余未选中的选项卡具有相同的颜色

我所做的：

<TabControl TabStripPlacement="Top" HorizontalAlignment="Stretch">
    <!-- http://www.wpf-tutorial.com/tabcontrol/styling-the-tabitems -->
    <TabControl.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <StackPanel Name="Panel" Cursor="Hand" Orientation="Vertical">
                            <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="10,2"/>
                            <TextBlock Name="BottomBar" Background="Gold" Height="5" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <!--<Setter TargetName="Panel" Property="Background" Value="Green" />-->
                                <Setter TargetName="BottomBar" Property="Background" Value="Green" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <!--<Setter TargetName="Panel" Property="Background" Value="Gold" />-->
                                <Setter TargetName="BottomBar" Property="Background" Value="Gold" />
                            </Trigger>
                            <!--<Trigger Property="Panel.IsMouseOver" Value="true">
                                <Setter TargetName="Panel" Property="Background" Value="Yellow"/>
                            </Trigger>-->
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
    <TabItem>
        <TabItem.HeaderTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="5*" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Background="Green">
                        <Image Height="32" Grid.Column="0" Source="/Icons/dashboard.png" />
                    </Border>
                    <TextBlock Margin="5,0,0,0" Text="لوحة المعلومات" Grid.Column="1" VerticalAlignment="Center"
                                   FontSize="20" Foreground="Green" />
                </Grid>
            </DataTemplate>
        </TabItem.HeaderTemplate>
        <TabItem.Content>
            <ContentControl Name="Dashboard" />
        </TabItem.Content>
    </TabItem>
</TabControl>

---

当所选选项卡更改时，我无法绑定底部栏+文本+图像的颜色。我尝试过使用

模板绑定

但没有成功，你能帮我吗？谢谢

如果您添加了一个样式触发器，在选中该触发器时设置

选项卡项

的

前台

属性，则可以使用

相关资源

：

<TabControl TabStripPlacement="Top" HorizontalAlignment="Stretch">
    <TabControl.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <StackPanel Name="Panel" Cursor="Hand" Orientation="Vertical">
                            <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="10,2"/>
                            <TextBlock Name="BottomBar" Background="Gold" Height="5" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="BottomBar" Property="Background" Value="Green" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.Resources>
    <TabItem>
        <TabItem.HeaderTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="5*" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Background="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}">
                        <Image Height="32" Grid.Column="0" Source="/Icons/dashboard.png" />
                    </Border>
                    <TextBlock Margin="5,0,0,0" Text="لوحة المعلومات" Grid.Column="1" VerticalAlignment="Center"
                                   FontSize="20"  Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}" />
                </Grid>
            </DataTemplate>
        </TabItem.HeaderTemplate>
        <TabItem.Content>
            <ContentControl Name="Dashboard" />
        </TabItem.Content>
    </TabItem>
</TabControl>

---

如果添加一个样式触发器，在选中该触发器时设置

选项卡项

的

前台

属性，则可以使用

相关资源

：

<TabControl TabStripPlacement="Top" HorizontalAlignment="Stretch">
    <TabControl.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <StackPanel Name="Panel" Cursor="Hand" Orientation="Vertical">
                            <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="10,2"/>
                            <TextBlock Name="BottomBar" Background="Gold" Height="5" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="BottomBar" Property="Background" Value="Green" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.Resources>
    <TabItem>
        <TabItem.HeaderTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="5*" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Background="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}">
                        <Image Height="32" Grid.Column="0" Source="/Icons/dashboard.png" />
                    </Border>
                    <TextBlock Margin="5,0,0,0" Text="لوحة المعلومات" Grid.Column="1" VerticalAlignment="Center"
                                   FontSize="20"  Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}" />
                </Grid>
            </DataTemplate>
        </TabItem.HeaderTemplate>
        <TabItem.Content>
            <ContentControl Name="Dashboard" />
        </TabItem.Content>
    </TabItem>
</TabControl>