CODEWITHSUNDEEP
wpftabcontrol
klashagelqvist
klashagelqvist

Reputation: 1261

WPF tabcontrol tabitem header

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

enter image description here

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

enter image description here

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.

Upvotes: 1

Views: 5140

Answers (2)

Ra&#250;l Ota&#241;o
Ra&#250;l Ota&#241;o

Reputation: 4760

Try this in your TabItem template...

 <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
 <Setter Property="VerticalContentAlignment" Value="Stretch"/>

Let me know if it solves your problem. I cant test your code here.

Upvotes: 0

Ross
Ross

Reputation: 4568

Your Grid's ColumnDefinitions will limit their width (Auto means automatically size to content)

Instead try:

<Grid.ColumnDefinitions>
   <ColumnDefinition Width="*" />
   <ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>

(Also, I don't know if will make a difference, but in my TabItem styles I usually set the Template with a ControlTemplate, rather than set the HeaderTemplate with a DataTemplate as you are doing)

Upvotes: 1

Related Questions