WPF選項卡樣式

我想樣式我的WPF TabControl。我基本上想要讓選項卡控件具有透明背景，並帶有白色邊框和文本。我希望所選標籤具有白色背景和透明文本（或任何彩色文本！）。本質上是一個2色標籤。WPF選項卡樣式

但是，我無法重寫選定的選項卡外觀 - 顯示爲白色。而我的孩子文本框正在採用TabItem字體的樣式。請注意，在屏幕截圖中，我的標籤有自己的樣式集，因此不要使用TabItem字體。

ScreenShot

我已經制定了以下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>

我怎麼能我的風格標籤是和阻止孩子上漿？

來源

2014-02-07 Andez

爲什麼不按照您想要的方式設置模板，並將其設置爲您自己的模板，而不是僅指定屬性和觸發器？不管怎樣，因爲你想要改變它的大部分。 –

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

來源

2014-02-07 21:25:09 dkozl

+1你的權利。以爲我早些時候嘗試過：S – Andez

您應該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>

來源

2014-02-07 21:30:18 Jan

WPF選項卡樣式

回答

相關問題