Fork me on Gitee

WPF TabControl 简单样式自定义

WPF TabControl 简单样式自定义，覆写控件模版，在此记录下

  1  <!-- SimpleStyles: TabControl -->
  2                     <Style TargetType="{x:Type TabControl}">
  3                         <Setter Property="OverridesDefaultStyle" Value="True"/>
  4                         <Setter Property="Padding" Value="2"/>
  5                         <Setter Property="HorizontalContentAlignment" Value="Left"/>
  6                         <Setter Property="VerticalContentAlignment" Value="Center"/>
  7                         <Setter Property="Background" Value="Transparent"/>
  8                         <Setter Property="BorderBrush" Value="#FFACACAC"/>
  9                         <Setter Property="BorderThickness" Value="1"/>
 10                         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 11                         <Setter Property="Template">
 12                             <Setter.Value>
 13                                 <ControlTemplate TargetType="{x:Type TabControl}">
 14                                     <Grid x:Name="templateRoot" ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
 15                                         <Grid.ColumnDefinitions>
 16                                             <ColumnDefinition x:Name="ColumnDefinition0"/>
 17                                             <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
 18                                         </Grid.ColumnDefinitions>
 19                                         <Grid.RowDefinitions>
 20                                             <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
 21                                             <RowDefinition x:Name="RowDefinition1" Height="*"/>
 22                                         </Grid.RowDefinitions>
 23                                         <TabPanel Name="HeaderPanel" Grid.Column="0" Grid.Row="0" Margin="0"
 24                                                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
 25                                                   Background="Transparent"  
 26                                                   IsItemsHost="True" 
 27                                                   KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
 28                                         <Border Name="ContentPanel" Grid.Column="0" Grid.Row="1"
 29                                                 BorderBrush="{TemplateBinding BorderBrush}"
 30                                                 BorderThickness="{TemplateBinding BorderThickness}"
 31                                                 Background="{TemplateBinding Background}"
 32                                                 KeyboardNavigation.DirectionalNavigation="Contained"  
 33                                                 KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
 34                                             <ContentPresenter Name="PART_SelectedContentHost"  Margin="0"
 35                                                               ContentTemplate="{TemplateBinding SelectedContentTemplate}"
 36                                                               Content="{TemplateBinding SelectedContent}"
 37                                                               ContentStringFormat="{TemplateBinding SelectedContentStringFormat}"
 38                                                               ContentSource="SelectedContent"
 39                                                               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
 40                                         </Border>
 41                                     </Grid>
 42                                     <ControlTemplate.Triggers>
 43                                         <Trigger Property="TabStripPlacement" Value="Bottom">
 44                                             <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
 45                                             <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
 46                                             <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
 47                                             <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
 48                                         </Trigger>
 49                                         <Trigger Property="TabStripPlacement" Value="Left">
 50                                             <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
 51                                             <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
 52                                             <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
 53                                             <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
 54                                             <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
 55                                             <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
 56                                             <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
 57                                             <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
 58                                         </Trigger>
 59                                         <Trigger Property="TabStripPlacement" Value="Right">
 60                                             <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
 61                                             <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
 62                                             <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
 63                                             <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
 64                                             <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
 65                                             <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
 66                                             <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
 67                                             <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
 68                                         </Trigger>
 69                                         <Trigger Property="IsEnabled" Value="False">
 70                                             <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
 71                                         </Trigger>
 72                                     </ControlTemplate.Triggers>
 73                                 </ControlTemplate>
 74                             </Setter.Value>
 75                         </Setter>
 76                     </Style>
 77 
 78                     <!-- SimpleStyles: TabItem -->
 79                     <Style TargetType="{x:Type TabItem}">
 80                         <Setter Property="OverridesDefaultStyle" Value="True"/>
 81                         <Setter Property="Foreground" Value="Black"/>
 82                         <Setter Property="Background" Value="#4CE4E4E4"/>
 83                         <Setter Property="BorderBrush" Value="#FFACACAC"/>
 84                         <Setter Property="BorderThickness" Value="1"/>
 85                         <Setter Property="Margin" Value="0"/>
 86                         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
 87                         <Setter Property="VerticalContentAlignment" Value="Stretch"/>
 88                         <Setter Property="Template">
 89                             <Setter.Value>
 90                                 <ControlTemplate TargetType="{x:Type TabItem}">
 91                                     <Grid x:Name="templateRoot" SnapsToDevicePixels="True" Background="Transparent">
 92                                         <Border Name="Border" Margin="{TemplateBinding Margin}"
 93                                                 BorderThickness="{TemplateBinding BorderThickness}" 
 94                                                 CornerRadius="2,12,0,0"
 95                                                 Background="{TemplateBinding Background}"
 96                                                 BorderBrush="{TemplateBinding BorderBrush}" >
 97                                             <ContentPresenter x:Name="ContentSite" 
 98                                                               VerticalAlignment="Center"
 99                                                               HorizontalAlignment="Center"
100                                                               ContentSource="Header"
101                                                               Margin="10,3,10,3" RecognizesAccessKey="True"/>
102                                         </Border>
103                                     </Grid>
104                                     <ControlTemplate.Triggers>
105                                         <MultiDataTrigger>
106                                             <MultiDataTrigger.Conditions>
107                                                 <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
108                                             </MultiDataTrigger.Conditions>
109                                             <Setter Property="Opacity" TargetName="templateRoot" Value="0.56"/>
110                                         </MultiDataTrigger>
111 
112                                         <MultiDataTrigger>
113                                             <MultiDataTrigger.Conditions>
114                                                 <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
115                                             </MultiDataTrigger.Conditions>
116                                             <Setter Property="Panel.ZIndex" Value="1"/>
117                                             <Setter Property="Background" TargetName="Border" Value="#FFA8D6F5"/>
118                                         </MultiDataTrigger>
119                                         <MultiDataTrigger>
120                                             <MultiDataTrigger.Conditions>
121                                                 <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
122                                             </MultiDataTrigger.Conditions>
123                                             <Setter Property="Panel.ZIndex" Value="1"/>
124                                             <Setter Property="Background" TargetName="Border" Value="{Binding Background}"/>
125                                         </MultiDataTrigger>
126                                     </ControlTemplate.Triggers>
127                                 </ControlTemplate>
128                             </Setter.Value>
129                         </Setter>
130                     </Style>

测试使用

1   <TabControl>
2                 <TabItem Header="TabItem1" Width="100">
3 
4                 </TabItem>
5 
6                 <TabItem Header="TabItem2" Width="100">
7                     
8                 </TabItem>
9    </TabControl>

效果图

 

posted @ 2022-12-13 12:55  VueDi  阅读(487)  评论(0)  编辑  收藏  举报