2012-09-14 47 views
1

我已经样式化的TabItem在一个TabControl这样WPF的TabControl TabItem的标题

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

的TabItem的期待确定,当我有一个像这样的

enter image description here

开几个标签的这种看行与“x”右对齐的近视图。我的问题是,当我打开更多的选项卡时,标准tabcontrol功能是在选项卡的空间很小时添加一行。发生这种情况时的TabItems被调整,但它似乎并不认为他们通知childcontrols因为标签看起来像这样

enter image description here

注意,“X”是不正确的为前对齐。我试图以不同的样式将数据模板放在网格和堆叠面板上,但无济于事。任何人都知道我将如何获得右对齐的“x”按钮,即使我有多行选项卡。

回答

1

GridColumnDefinitions将限制其宽度(Auto意味着自动调整大小以内容

而是尝试:

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

(另外,我不知道是否会有所作为,但在我的TabItem款式中,我通常将Template设置为ControlTemplate,而不是将HeaderTemplate设置为DataTemplate

+0

对不起,我已经试过,效果相同 – klashagelqvist

0

在TabItem的模板尝试......

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

让我知道这是否解决您的问题。我无法在这里测试你的代码。

+0

对不起也试过这个效果相同 – klashagelqvist