WPF 自定义 TabControl 模板

Question

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

从设计中我可以看出

选项卡 Header 由 <Border>Image</Border> + Text + a bottom 栏组成
所选选项卡 header 应：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>

I am stuck at binding the colors of bottom bar + text + image when the selected tab changed.我试过使用 TemplatedBinding 但没有成功，你能帮帮我吗？谢谢

Answer 1

如果您添加样式触发器，在选择 TabItem 时设置 Foreground 属性，您可以绑定 Background 和 Foreground Border 元素的属性和 HeaderTemplate 中的 TextBlock 分别用于此属性使用 RelativeSource:

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

WPF 自定义 TabControl 模板

WPF Custom TabControl Template

wpf

triggers

tabcontrol