WPF 自定义 TabControl 模板答案

【问题标题】：WPF Custom TabControl TemplateWPF 自定义 TabControl 模板
【发布时间】：2017-02-16 13:39:06
【问题描述】：

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

从设计上我可以猜到

Tab Header 由<Border>Image</Border> + Text + a bottom bar 组成
选择的标签页眉应该是：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 没有成功，你能帮帮我吗？谢谢

【问题讨论】：

标签： wpf triggers tabcontrol

【解决方案1】：

如果您添加一个样式触发器，当它被选中时设置TabItem 的Foreground 属性，您可以分别绑定Border 元素的Background 和Foreground 属性和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>

【讨论】：