Question

I have a template like this:

    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" BorderBrush="#666" BorderThickness="1,1,1,0" CornerRadius="8,8,0,0" Margin="0,0,0,-1">
                            <DockPanel>
                                <TextBlock x:Name="TabItemText" Foreground="#444" Padding="12 6 8 6" TextOptions.TextFormattingMode="Display">
                                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header"/>
                                </TextBlock>
                                <Image Source="../Resources/TabCloseButton.png" Width="8" Margin="0 2 8 0" />
                            </DockPanel>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

As you can see, I target TabItem, and along with adding some styles I also specify an image that is similar to web browser tab close icon. Now, my question is this: how do I listen to clicks on the tab items and find out if the user clicked on the tab close image so that I could actually close the tab?

So in essence, I’m looking for web browser -like tab functionality.

Answer 1

You could use a Button for that:

<Button Command="{Binding CloseCommand}">
   <Image Source="../Resources/TabCloseButton.png" Width="8" Margin="0 2 8 0" />
</Button>