WPF TabControl 簡單樣式自定義
阿新 • • 發佈：2022-12-13
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>
效果圖