2012-04-11 17 views
2

私はWPF XAML(.NET 4)でTabControlをスタイリングしています。私ができることは、トリガーに基づいてタブをスタイルするか、すべて同じスタイルにすることです。他のタブが最初のタブとは異なるが、お互いに同じようにスタイルが設定されている間に(タブキーを使用してTabItemを整形する)、最初のタブのみが異なるスタイルになります。WPFで単一のタブアイテムヘッダーの背景を変更するにはどうすればよいですか?

ありがとうございます。

+0

データトリガーを使用すると何が問題になりますか? –

+0

それは使用されるかもしれませんが、私は1つのタブ項目にのみスタイルを適用する方法はありますか? –

+0

ほとんどの場合、親の 'Items'コレクション内の各' TabItem'のインデックスを返すカスタムコンバータが必要です。残りの部分はトリガーで行うのが簡単です。 – 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> 

しかし、あなたはちょうどその2つのスタイルを定義する最初のタブ項目の背景色を変更すると、タブ項目1のために他の

スタイルに最初のタブ項目及び第二のいずれかに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> 
関連する問題