Multiline TabItem Header in WPF

Hi Experts,

          I have a Style defined for my TabItems for a Tab Control under WPF.  How do I need to change my below code to accomplish having multiline TabItem Header's like in the picture:

Tabs
Here's my code.  I have everything I want except the multiline header text:

<Style TargetType="{x:Type TabItem}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid Width="200" Height="70">
                            <Border Name="Border" Background="Black" BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0" >
                                <TextBlock TextWrapping="Wrap"  Height="70" Width="200" VerticalAlignment="Center" TextAlignment="Center" HorizontalAlignment="Stretch" >
                                    <ContentPresenter x:Name="ContentSite" ContentSource="Header" Margin="2,0,0,0"/>
                                </TextBlock>                                
                            </Border>                            
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#009900" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="Black" />
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>            
        </Style>

Open in new window



Thanks!
axnst2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

apeterCommented:

Simpler way would be have two textboxes..

<TabControl>
       <TabItem>
         <TabItem.Header>
           <StackPanel Orientation="Horizontal">
             <TextBlock Text="{Bindinging FirstLine}" Margin="2,0,0,0" VerticalAlignment="Center" />
              <TextBlock Text="{Bindinging SecondLine}" Margin="2,0,0,0" VerticalAlignment="Center" />
           </StackPanel>
         </TabItem.Header>
       </TabItem>
 </TabControl>

not sure of this give a try. Have only one text in above and set a fixed width and height for the textbox. Enable Textwrapping=true that should split the lines if there are any spaces btw the words.
0
MikeTooleCommented:
I think that the problem possibly originates in the amount of space the textblock is thought to have when WPF performs the layout.

Applying a DataTemplate to the Header seems to be a way that gets WPF to look at the specfied width.

The appended codes defines a TabControl that wraps the header text and reacts to the IsSelected property of the TabItem.
It's set with a MaxWidth on the header's border to allow it to shrink to fit, you can change that to a fixed Width if you want.
It won't wrap unless the text is longer than the spcified width, so your original 200x70 seems a little large.

Hope this helps
<TabControl >
            <TabControl.Resources>
                <Style TargetType="Border">
                    <Setter Property="Background" Value="Black"/>
                </Style>
                <DataTemplate x:Key="TabHeaderTemplate">
                    <Border Name="TabBorder" MaxWidth="60" BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0" Padding="4,0">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Background" Value="Black"/>
                            </Style>
                            </Border.Style>
                        <TextBlock Text="{Binding}" Foreground="White" TextAlignment="Center"  Height="40"  TextWrapping="Wrap"/>
                    </Border>
                    <DataTemplate.Triggers>
                        <DataTrigger 
                            Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="True">
                            <Setter   TargetName="TabBorder" Property="Background" Value="#009900" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
                <Style TargetType="TabItem">
                    <Setter Property="HeaderTemplate" Value="{StaticResource TabHeaderTemplate}"/>
                </Style>
            </TabControl.Resources>
            <TabItem  Header="Mike's Tab" IsSelected="True"/>
            <TabItem Header="Another One" />
            <TabItem Header="Short" />
        </TabControl>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
axnst2Author Commented:
Neither answers were the solutions.  I ended up just putting two TextBoxes in and I split the string behind the seen at run time.  A work-around at best...
0
vbighamCommented:
If you are specifying the headers in xaml, you could try using a textblock with a line break.  

 
<TextBlock>FirstLine <LineBreak />Second Line</TextBlock>

Open in new window

0
axnst2Author Commented:
For the effort- I don't know all the answers either...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.