How to make label stretch on tabitem in wpf

Question

I have a problem when I try to use a click event on a Label that is the Content of a TabItem Header.

   <TabItem Name="prod" MouseLeftButtonDown="prod_MouseLeftButtonDown">
          <TabItem.Header >
                <Label Content="Prod" MouseLeftButtonDown="prod_MouseLeftButtonDown" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
          </TabItem.Header>

The problem is that the Label does not occupy the entire TabItem Header so if the user clicks in the margin of the Header the Click event is not triggered.

You can see that I would like it to be no spaces where the red line is now.

How can I solve this?

Thank you

Answer 1

The simplest thing you can do is apply some negative Margin and complement it with Padding . There is always hard coded margin for the ContentPresenter. So this way should work consistently once you adjusted the Margin well (such as by trial and error). The Padding is positive and has the inverse values of Margin . Here is what I've tried, it works on my side, you can tweak the margin according to your requirement:

<Label Content="Prod" MouseLeftButtonDown="prod_MouseLeftButtonDown" 
       HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
        Margin="-8,-3,-8,-3" Padding="8,3,8,3"/>

Without tweaking like this, you cannot easily change the hard coded Margin unless you copy and modify the standard template of the TabControl .

Answer 2

Simply trigger the MouseLeftButtonDown event on the TabItem itself.. and not on the label...

   <TabItem Name="prod" MouseLeftButtonDown="prod_MouseLeftButtonDown">
      <TabItem.Header >
            <Label Content="Prod"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
      </TabItem.Header>
 </TabItem>

Answer 3

Try to set the height and width property of the label to Auto

 <Label Height="Auto" Width="Auto" Content="Prod" MouseLeftButtonDown="prod_MouseLeftButtonDown" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

See msdn :The width property

Gets or sets the width of the control.(Inherited from Control.)

and the height property

Gets or sets the height of the control.(Inherited from Control.)

Answer 4

You can access the ContentPresenter itself and modify it accordingly. You can also get fancy and use it as a style for all of your TabItems .

    <TabControl Width="500">
        <TabControl.Items>
            <TabItem>
                <TabItem.Header>
                    Prod
                </TabItem.Header>
                <TabItem.HeaderTemplate>
                    <DataTemplate>
                        <ContentPresenter Margin="-8, -3, -8, 0" >
                            <ContentPresenter.Content>
                                <TextBlock MouseLeftButtonDown="prod_MouseLeftButtonDown" Text="{TemplateBinding Content}"/>
                            </ContentPresenter.Content>
                        </ContentPresenter>
                    </DataTemplate>
                </TabItem.HeaderTemplate>
            </TabItem>
        </TabControl.Items>
    </TabControl>