Metro選項卡控件樣式WPF

Question

我想實現一個像這樣的項目（https://github.com/thielj/MetroFramework）的tabcontrol樣式。不幸的是，metroframework項目只適用於winforms。

有人可以幫我在xaml中獲得這個風格嗎？

如果我有用於分隔tabitem和tabcontent的藍色/灰色線條的樣式，我會幫助我很多。

在此先感謝。

Answer 1

1. 首先創建兩個ResourceDictionary存儲新的模板，一個用於TabControl，一個用於TabItem並將其命名爲TabControlTemplate.xaml和TabItemTemplate.xaml
2. 對TabControl和TabItem，然後右鍵單擊上述控件創建的默認模板副本選擇Edit Template > Edit a copy...。然後選擇您的樣式名稱爲MetroLikeTabControl和MetroLikeTabItem，併爲每個模板設置目標資源字典。 Visual Studio在選定的文件中創建該模板的副本。

3. 在TabControlTemplate.xaml添加此setter標籤控制方式：

   <Setter Property="ItemContainerStyle" Value="{DynamicResource MetroLikeTabItem}" /> 
   

4. 然後模板的這部分改變：

   <TabPanel Grid.Row="0" Grid.Column="0" x:Name="HeaderPanel" 
         Margin="2,2,2,0" Panel.ZIndex="1" 
         Background="Transparent" IsItemsHost="True" KeyboardNavigation.TabIndex="1" /> 
   

   到這個新：

   <Grid Grid.Row="0" Grid.Column="0"> 
        <Border BorderThickness="0 0 0 2" BorderBrush="Gray" /> 
        <TabPanel x:Name="HeaderPanel" Margin="2,2,2,0" Panel.ZIndex="1" 
          Background="Transparent" IsItemsHost="True" KeyboardNavigation.TabIndex="1" /> 
   </Grid> 
   

   這增加只有底部厚度的邊框，並使您的邊框o與TabItem的邊界（爲什麼只有底部邊界？因爲我正在實施你想要的東西時TabControl的TabStripPlacement屬性設置爲Top。您可以設置觸發器來實現所有其他狀態。

5. 在TabItemTemlate.xaml設置元件的BorderBrush = "0 0 0 2"與名稱innerBorder和除去Opacity = "0"屬性。

6. 然後根據需要改變IsMouseOver = true,IsSelected = true和IsSelected = false (default style of a TabItem)的樣式。這是我編輯的選定狀態觸發器，將TabItem的內容和Border的顏色更改爲藍色。

   <MultiDataTrigger> 
        <MultiDataTrigger.Conditions> 
            <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" /> 
            <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top" /> 
        </MultiDataTrigger.Conditions> 
        <Setter Property="Panel.ZIndex" Value="1" /> 
        <!-- commented line below, because we don't need Select Scale behaviour in metro style anymore --> 
        <!--<Setter Property="Margin" Value="-2,-2,-2,0" />--> 
        <Setter TargetName="innerBorder" Property="Opacity" Value="1" /> 
        <Setter TargetName="innerBorder" Property="BorderThickness" Value="0,0,0,2" /> 
        <Setter TargetName="innerBorder" Property="BorderBrush" Value="#0088cc" /> 
        <Setter TargetName="contentPresenter" Property="TextBlock.Foreground" Value="#0088cc" /> 
        <Setter TargetName="mainBorder" Property="BorderThickness" Value="0" /> 
   
   </MultiDataTrigger>