WPF Tab Styling

Question

Я пытаюсь создать свой WPF TabControl. Я в основном хочу, чтобы элемент управления вкладкой имел прозрачный фон с белой рамкой и текстом. Я хочу, чтобы выбранная вкладка имела белый фон и прозрачный текст (или любой цветной текст!). По существу 2 вкладка цвета.

Однако я не могу переопределить выбранный вид вкладки - это отображается как белый. И мои дочерние текстовые поля берут стиль шрифта TabItem. Обратите внимание: на снимке экрана мои ярлыки имеют свой собственный стиль, поэтому не используйте шрифт TabItem.

У меня есть следующий код XAML в месте, чтобы сделать это. В идеале я хочу создать стили, чтобы я мог повторно использовать приложение.

ресурсов Словарь

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"> 
    <Style x:Key="Tabs" TargetType="TabControl"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="BorderBrush" Value="White"/> 
    </Style> 
    <Style x:Key="TabItemStyle" TargetType="TabItem"> 
     <Setter Property="Foreground" Value="White" /> 
     <Setter Property="VerticalAlignment" Value="Top" /> 
     <Setter Property="FontSize" Value="16" /> 
     <Setter Property="Background" Value="Transparent"/> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True"> 
       <Setter Property="Foreground" Value="Red"/> 
       <Setter Property="Background" Value="White"/> 
      </DataTrigger> 
      <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False"> 
       <Setter Property="Foreground" Value="LightGray"/> 
       <Setter Property="Background" Value="Transparent"/> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 

</ResourceDictionary> 

Тогда XAML разметке

<TabControl Style="{StaticResource Tabs}"> 
    <TabItem Header="General" Style="{StaticResource TabItemStyle}">...</TabItem> 
    <TabItem Header="Details" Style="{StaticResource TabItemStyle}">...</TabItem> 
    <TabItem Header="Info" Style="{StaticResource TabItemStyle}">...</TabItem> 
    <TabItem Header="More Stuff..." Style="{StaticResource TabItemStyle}">...</TabItem> 
</TabControl> 

Как укладывать мои вкладки, чтобы быть и предотвратить детей от размера?

Answer 1

Ваш DataTriggers не работает. Чтобы исправить это изменить RelatveSource к Self

Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}" 

Однако я хотел бы предложить, чтобы изменить их Triggers следующим образом:

<Style.Triggers> 
    <Trigger Property="IsSelected" Value="True"> 
     <Setter Property="Foreground" Value="Red"/> 
     <Setter Property="Background" Value="White"/> 
    </Trigger> 
    <Trigger Property="IsSelected" Value="False"> 
     <Setter Property="Foreground" Value="LightGray"/> 
     <Setter Property="Background" Value="Transparent"/> 
    </Trigger> 
</Style.Triggers> 

Answer 2

Вы должны создать шаблон для управления TabItem.

Этот образец изменения TabItem фона для прозрачного и текстового цвета для белого.

Вы можете использовать собственную цветовую схему.

<Window.Resources> 
    <Style TargetType="TabControl"> 
     <Setter Property="Background" 
       Value="Transparent" /> 
     <Setter Property="BorderBrush" 
       Value="White" /> 
    </Style> 

    <Style TargetType="{x:Type TabItem}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid> 
         <Border Name="Border" 
           Margin="0,0,-4,0" 
           Background="{x:Static Brushes.White}" 
           BorderBrush="{x:Static Brushes.White}" 
           BorderThickness="1,1,1,1" 
           CornerRadius="2,12,0,0"> 
          <ContentPresenter x:Name="ContentSite" 
               Margin="12,2,12,2" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" 
               ContentSource="Header" 
               RecognizesAccessKey="True" /> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsSelected" 
           Value="True"> 
          <Setter Property="Panel.ZIndex" 
            Value="100" /> 
          <Setter TargetName="Border" 
            Property="Background" 
            Value="{x:Static Brushes.Transparent}" /> 
          <Setter TargetName="Border" 
            Property="BorderThickness" 
            Value="1,1,1,0" /> 
          <Setter Property="TextBlock.Foreground" 
            Value="White" /> 
          <!--<Setter Property="TextBlock.Foreground" 
            Value="Transparent" />--> 
         </Trigger> 
         <Trigger Property="IsEnabled" 
           Value="False"> 
          <Setter TargetName="Border" 
            Property="Background" 
            Value="{x:Static Brushes.White}" /> 
          <Setter TargetName="Border" 
            Property="BorderBrush" 
            Value="{x:Static Brushes.White}" /> 
          <Setter Property="Foreground" 
            Value="{x:Static Brushes.White}" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 
<Grid Background="SkyBlue"> 
    <TabControl Margin="20"> 
     <TabItem Header="TabItem #1"> 
      <TextBox>Tab Item #1 content</TextBox> 
     </TabItem> 
     <TabItem Header="TabItem #2"> 
      <TextBox>Tab Item #1 content</TextBox> 
     </TabItem> 
     <TabItem Header="TabItem #3"> 
      <TextBox>Tab Item #1 content</TextBox> 
     </TabItem> 
    </TabControl> 
</Grid>