WPF自定义TabControl模板

Question

我正在尝试实现此标签的设计：

从设计中我可以想到

• 标签页眉由<Border>Image</Border> + Text + a bottom栏
组成
• 所选标签页应为：Border.Background = Green，Text.Foreground = Green
• 其余未选择的标签具有相同的颜色。

我做了什么：

<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>

当选定的标签发生变化时，我无法绑定底栏+文字+图像的颜色。我尝试使用TemplatedBinding但没有成功，你能帮帮我吗？感谢

Answer 1

如果您添加了一个样式触发器，该触发器在TabItem被选中时设置了Background属性，您可以绑定{{1}的Foreground和Border属性使用TextBlock将此元素和RelativeSource分别放在HeaderTemplate中：

<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>