Change Image on IsSelected TabControl

问题

I want to be able to change the image of the tabItem when it is selected but I'm really struggling at the moment to understand how others implement use of styles, templates and triggers.

I have this so far:

<TabControl HorizontalAlignment="Left" Height="386" VerticalAlignment="Top" Width="600" TabStripPlacement="Left" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
        <TabItem Header="TabItem" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="-2,-2,-1,-28" Width="40" Height="59" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TabItem.Background>
                <ImageBrush ImageSource="myImageLocation" Stretch="Uniform"/>
            </TabItem.Background>
            <Grid/>
        </TabItem>
        <TabItem Header="TabItem" Margin="0,89,0,-89" BorderBrush="{x:Null}" Foreground="{x:Null}" Height="51" HorizontalAlignment="Center" Width="43">
            <TabItem.Background>
                <ImageBrush ImageSource="myImageLocation" Stretch="Uniform"/>
            </TabItem.Background>
            <Grid/>
        </TabItem>

I have set the image as the background of the tabItem headers.

回答1:

Take a look at following example:

<TabControl>
    <TabControl.Resources>
        <DataTemplate x:Key="tabItemGeneralHeaderTemplate">
            <StackPanel Orientation="Horizontal" Margin="0,-3,0,0">
                <Image Name="tabGeneralImg" Source="Image/tabGeneralActive.png" Width="11" Height="11"></Image>
                <Label Name="tabGeneralLbl" Content="General"></Label>
            </StackPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
                    <Setter TargetName="tabGeneralImg" Property="Source" Value="Images/tabGeneral.png"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </TabControl.Resources>
    <TabItem Name="tabItemGeneral" HeaderTemplate="{StaticResource tabItemGeneralHeaderTemplate}">
        <Grid>
            ...
        </Grid>
    </TabItem>
</TabControl>

Just change the source property of the images to some path in your file system and you should do fine :)

来源：https://stackoverflow.com/questions/20386083/change-image-on-isselected-tabcontrol

标签

wpf

xaml

tabitem