1

我遇到了一个我正在寻求解决方案的问题。我有一个添加了样式的 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>
4

1 回答 1

0

实际上，您可以在不替换 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>
于 2012-12-28T22:58:30.877 回答