CODEWITHSUNDEEP
c#wpf
Andrei Dobrin
Andrei Dobrin

Reputation: 1185

How to make label stretch on tabitem in wpf

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.

enter image description here

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

Upvotes: 1

Views: 1777

Answers (4)

d.moncada
d.moncada

Reputation: 17402

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>

Upvotes: 0

Syed Osama Maruf
Syed Osama Maruf

Reputation: 1935

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.)

Upvotes: 0

Hopeless
Hopeless

Reputation: 4773

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.

Upvotes: 4

Slashy
Slashy

Reputation: 1881

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>

Upvotes: 1

Related Questions