2012-04-11 4 views
2

Я стилизую TabControl в WPF XAML (.NET 4), все, что я могу сделать, это стиль вкладки на основе триггеров или идентичный стиль их всех. Есть ли способ, чтобы только первая вкладка была стилизована по-разному, в то время как другие вкладки стилизованы, отличные от первой вкладки, но такие же, как и другие (a.k.a, используя индекс вкладки, чтобы стилизовать TabItem).Как изменить фон одного заголовка элемента вкладки в WPF?

спасибо.

+0

Что случилось с использованием триггера данных? –

+0

Может использоваться, но есть ли способ применить стиль только к одному элементу табуляции? –

+0

Вам, скорее всего, понадобится настраиваемый конвертер, который возвращает индекс каждого 'TabItem' в коллекции' Items' его родителя; остальное было бы тривиально делать с триггером. – Jon

ответ

5

Вы можете использовать AlternationCount и AlternationIndex:

<TabControl AlternationCount="{Binding Path=Items.Count,RelativeSource={RelativeSource Self}}"> 
    <TabControl.ItemContainerStyle> 
     <Style TargetType="TabItem"> 
      <Style.Triggers> 
       <Trigger Property="ItemsControl.AlternationIndex" 
          Value="0"> <!-- First item --> 
        <Setter Property="FontWeight" 
          Value="Bold"/> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </TabControl.ItemContainerStyle> 
    <TabItem Header="First"/> 
    <TabItem Header="Second"/> 
    <TabItem Header="Third"/> 
    <TabItem Header="Fourth"/> 
</TabControl> 
3

Если вы хотите изменить цвет фона только выбранной вкладки элемента затем использовать этот вид стиля и применить этот стиль к закладке Пункт.

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle"> 
    <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid> 
         <Border Name="Border" Background="Red" BorderBrush="#FF1467AF" 
            BorderThickness="1" 
            Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True"> 
          <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White"> 
         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/> 
          </TextBlock> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsSelected" Value="True"> 
          <Setter TargetName="Border" Property="Background" Value="Yellow"/> 

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

Но если вы хотите просто изменить цвет фона первого элемента вкладки затем определить два стиля и применить один к первому элементу вкладок и второй к другим

Стиль для вкладок пункта 1:

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyleForFirst"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid> 
         <Border Name="Border" Background="Red" BorderBrush="#FF1467AF" 
            BorderThickness="1" 
            Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True"> 
          <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White"> 
         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/> 
          </TextBlock> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
</Style> 

Стиль для других элементов вкладки:

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyleForOther"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid> 
         <Border Name="Border" Background="Yellow" BorderBrush="#FF1467AF" 
            BorderThickness="1" 
            Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True"> 
          <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White"> 
         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/> 
          </TextBlock> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
</Style>