WPF TabItem邊框不反映BorderThickness屬性

我有一個TabControl與幾個TabItems。我試圖讓他們有一個平坦的設計。這個想法是讓選項卡的外部邊界消失，選項卡底部的綠色線顯示活動選項卡。我已經能夠使綠線完美工作，但無論我做什麼，我都無法擺脫每個TabItem的左邊，上邊和右邊線。WPF TabItem邊框不反映BorderThickness屬性

由於我的規範中的文本格式約束，我已經將TabItem頭包裝到由邊框包裝的TextBlock中。我懷疑這個組合可能與它有關。如果有一種方法可以在活動標籤上顯示綠色底部邊框，同時允許換行符（每個標籤有兩個單詞需要分成兩行）和文本居中在標籤標題中，我完全可以更改我的組態。我嘗試過BorderThickness，Margin和Padding屬性的各種組合，但無濟於事。

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl"> 
    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White"> 
     <TabItem.Header> 
      <Border Style="{StaticResource TabItemText}"> 
       <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap"></TextBlock> 
      </Border> 
     </TabItem.Header> 
    </TabItem> 
</TabControl>

這是標籤着色代碼。它目前做了一些冗餘的事情，但它說明了我想要做的事情。

<Style x:Key="TabItemText" TargetType="{x:Type Border}"> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True"> 
      <Setter Property="BorderBrush" Value="#57B481"/> 
      <Setter Property="BorderThickness" Value="0 0 0 4"/> 
      <Setter Property="Margin" Value="0 0 0 -3"/> 
     </DataTrigger> 
     <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False"> 
      <Setter Property="BorderThickness" Value="0 0 0 0"/> 
      <Setter Property="Margin" Value="0 0 0 -3"/> 
     </DataTrigger> 
    </Style.Triggers> 
</Style>

來源

2017-02-23 Taylor Hill

您可以/應該更改Template的TabItem。它包含一個Border，你應該修復它的BorderThickness到"0,0,0,2"。最後一個值確定您嘗試創建的綠色邊框的高度。您還應該將BorderBrush和BackgroundBrush設置爲相同。您將觸發器IsSelected==True中的BorderBrush更改爲您選擇的顏色。請注意，您無需在TabItem的標題中使用邊框。只需使用TexBlock來控制TextWrapping和東西。我在下面的例子中解釋了其他一些小變化：

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl"> 
    <TabControl.Resources> 
     <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1"> 
      <GradientBrush.GradientStops> 
       <GradientStopCollection> 
        <GradientStop Color="#FFF" Offset="0.0"/> 
        <GradientStop Color="#EEE" Offset="1.0"/> 
       </GradientStopCollection> 
      </GradientBrush.GradientStops> 
     </LinearGradientBrush> 
     <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" /> 
     <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" /> 
     <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" /> 
     <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" /> 
     <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" /> 
     <ControlTemplate x:Key="simpleTI" TargetType="TabItem"> 
      <Grid> 
       <Border Name="Border" 
          BorderThickness="0,0,0,2" 
          Background="{StaticResource LightBrush}" 
          BorderBrush="{StaticResource LightBrush}" 
          CornerRadius="0" > 
        <ContentPresenter x:Name="ContentSite" Margin="5,0" VerticalAlignment="Center" HorizontalAlignment="Center" 
              ContentSource="Header" RecognizesAccessKey="True"/> 
       </Border> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsSelected" Value="True"> 
        <Setter TargetName="Border" Property="BorderBrush" Value="#57B481" /> 
       </Trigger> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" /> 
        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </TabControl.Resources> 


    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" > 
     <TabItem.Header> 
      <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap" /> 
     </TabItem.Header> 
    </TabItem> 
    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" > 
     <TabItem.Header> 
      <TextBlock TextAlignment="Center" Text="Actions Needed 1" TextWrapping="Wrap" /> 
     </TabItem.Header> 
    </TabItem> 
    <TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" > 
     <TabItem.Header> 
      <TextBlock TextAlignment="Center" Text="Actions Needed 2" TextWrapping="Wrap" /> 
     </TabItem.Header> 
    </TabItem> 
</TabControl>

來源

2017-02-24 07:55:28 Ron

我敢肯定，你將需要重寫你的TabItem和/或TabControl的控制模板來做到這一點。請參閱https://msdn.microsoft.com/en-us/library/ms752032.aspx作爲起點。

來源

2017-02-23 22:40:24

WPF TabItem邊框不反映BorderThickness屬性

回答

相關問題