Metro選項卡控件樣式WPF

Question

我想實現一個tabcontrol樣式，就像在該項目中一樣（ https://github.com/thielj/MetroFramework ）。 不幸的是，metroframework項目僅適用於winform。

有人可以幫助我在xaml中獲得此樣式嗎？

如果我具有將tabitem和tabcontent分開的藍色/灰色線條的樣式，將會對我有很大幫助。

提前致謝。

Answer 1

1. 首先創建兩個ResourceDictionary來存儲新模板，一個用於TabControl ，一個用於TabItem ，並將它們命名為TabControlTemplate.xaml和TabItemTemplate.xaml
2. 通過右鍵單擊TabControl和TabItem ，然后選擇“ Edit Template > Edit a copy...為上述控件創建默認模板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> 

   這將添加僅底部厚度的邊框，並使TabPanel的邊框與TabItem的邊框重疊（為什么只有底部邊框？因為當TabControl的TabStripPlacement屬性設置為Top時，我正在實現所需的設置。可以設置觸發器實施所有其他狀態。

5. 在TabItemTemlate.xaml為名稱為innerBorder元素設置BorderBrush = "0 0 0 2"並刪除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>