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を変更するだけで、スタイルを大幅に短くすることができます。

<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 に答える