Question

我遇到了一个我正在寻求解决方案的问题。我有一个tabControl添加了样式。

我想在每个TabItem.Header上只显示图像，当选择该标签时，从标题中隐藏图像并显示文本（其他非活动标题将显示图像）。

任何人都可以提供帮助吗？

<Window.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Name="Borderer" Background="#FF777777" Height="70" Width="90">
                        <ContentPresenter x:Name="ContentTabItem" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Foreground" Value="#FF000000" />
                            <Setter TargetName="Borderer" Property="Background" Value="WhiteSmoke" />

                            <Setter Property="Header" >
                                <Setter.Value>
                                    <Grid>
                                        <ContentPresenter ContentSource="Tag" />
                                    </Grid>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <TabControl Height="189" HorizontalAlignment="Left" Margin="94,123,0,0" Name="tabControl1" VerticalAlignment="Top" Width="500">
        <TabItem Name="tabItem1" IsSelected="True" >
            <TabItem.Tag>
                <TextBlock Text="blab lab la" />
            </TabItem.Tag>
            <TabItem.Header>
                <Image Source="images/img1.png" Width="35" Height="35" />
            </TabItem.Header>

            <TabItem.Content>
                <Grid>
                    <TextBlock Name="aaa" />
                </Grid>
            </TabItem.Content>
        </TabItem>
        <TabItem >
            <TabItem.Tag>
                <TextBlock Text="la lab blab" />
            </TabItem.Tag>
            <TabItem.Header>
                <Image Source="images/img2.png" Width="35" Height="35" />
            </TabItem.Header>
            <TabItem.Content>
                <Grid>
                    <TextBlock Name="bbb" />
                </Grid>
            </TabItem.Content>
        </TabItem>
    </TabControl>
</Grid>

Answer 1

实际上，您可以在不替换TabItem上的整个ControlTemplate的情况下执行此操作。您可以在选择TabItem时更改TabItem的HeaderTemplate，使您的Style更短：

<DataTemplate x:Key="SelectedHeaderTemplate" >
    <ContentControl Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem}, 
                                      Path=Tag}" />
</DataTemplate>

<Style TargetType="{x:Type TabItem}">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="HeaderTemplate" Value="{StaticResource SelectedHeaderTemplate}" />
        </Trigger>
    </Style.Triggers>
</Style>

选中时，将TabItem.Header从图像更改为文本

1 个答案: