I have styled the tabitem in a tabcontrol as such
<Style x:Key="TabHeaderStyle" TargetType="{x:Type TabItem}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate >
<Grid HorizontalAlignment="Stretch" Height="22">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2" ></RowDefinition>
<RowDefinition Height="Auto" ></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Fill="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem} }, Path=Content.DataContext.HeaderColor}" Grid.ColumnSpan="2"></Rectangle>
<TextBlock Grid.Row="1" Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem} }, Path=Content.DataContext.HeaderInfo}"
VerticalAlignment="Bottom" Margin="4,0,8,0"/>
<Button Grid.Row="1" Grid.Column="1" Content="x" ToolTipService.ToolTip="Close this view." BorderBrush="{x:Null}" Background="{x:Null}" Foreground="#FF224A71" VerticalAlignment="Center" Padding="3,0">
<Button.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#4BFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Button.OpacityMask>
<ei:Interaction.Triggers>
<ei:EventTrigger EventName="Click">
<Controls:CloseTabbedViewAction />
</ei:EventTrigger>
</ei:Interaction.Triggers>
</Button>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The tabitem look ok when i have a couple of tabs open like this
This look ok with the "x" , close view right aligned. My problem is that when i open more tabs, the standard tabcontrol functionallity is to add a row when there is to little space for the tabs. When this happens the tabitems are resized but it does not seem that they notify the childcontrols because the tabs look like this
Notice that the "x" is not right aligned as before. I have tried to base the datatemplate on both grid and stackpanel with different style to no avail. Anyone knows how i will get the "x" button right aligned even when i have multiple rows of tabs.
Best Answer
Your
Grid
'sColumnDefinitions
will limit their width (Auto
means automatically size to content)Instead try:
(Also, I don't know if will make a difference, but in my
TabItem
styles I usually set theTemplate
with aControlTemplate
, rather than set theHeaderTemplate
with aDataTemplate
as you are doing)