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>