In the UI design of the actual project, TabControl is often used, such as label-based browser and Tab settings.
TabControl is required to display different styles according to different requirements. Here we will learn about TabControl.
Let's take a look at the TabControl attributes.
TabStripPlacement controls the direction of the TabItem Header,
Let's take a look at the inheritance relationship of TabControl:
TabControl-Seletor-ItemControl
This makes it clear that TabControl inherits from Seletor like ListBox, so that we can write the display styles of TabControl and TabItem through ControlTemplate and DataTemplate.
Example:
1 <Window x: Class = "WpfApplication2.MainWindow"
2 xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns: local = "clr-namespace: WpfApplication2"
5 Title = "MainWindow" Height = "300" Width = "300">
6 <Window. Resources>
7 <Style TargetType = "{x: Type local: CustomItem}">
8 <Setter Property = "Padding" Value = "0"/>
9 <Setter Property = "HeaderTemplate">
10 <Setter. Value>
11 <DataTemplate>
12 <ContentPresenter Content = "{TemplateBinding Property = ContentControl. Content}">
13 <ContentPresenter. LayoutTransform>
14 <RotateTransform Angle = "-90"/>
15 </ContentPresenter. LayoutTransform>
16 </ContentPresenter>
17 </DataTemplate>
18 </Setter. Value>
19 </Setter>
20 <Setter Property = "Template">
21 <Setter. Value>
22 <ControlTemplate TargetType = "{x: Type local: CustomItem}">
23 <Border x: Name = "bd1" CornerRadius = "30" BorderThickness = "2" BorderBrush = "Blue">
24 <Border. Background>
25 <ImageBrush ImageSource = "{Binding Path = Icon, RelativeSource = {RelativeSource TemplatedParent}"> </ImageBrush>
26 </Border. Background>
27 <Grid x: Name = "grd">
28 <ContentPresenter ContentSource = "Header" HorizontalAlignment = "Center"
29 Margin = "10, 2, 10, 2" VerticalAlignment = "Center"/>
30 </Grid>
31 </Border>
32 <ControlTemplate. Triggers>
33 <Trigger Property = "IsMouseOver" Value = "True" SourceName = "grd">
34 <Setter Property = "BorderBrush" Value = "Yellow" TargetName = "bd1"/>
35 </Trigger>
36 <Trigger Property = "Selector. IsSelected" Value = "True">
37 <Setter Property = "BorderBrush" TargetName = "bd1" Value = "Red"> </Setter>
38 </Trigger>
39 </ControlTemplate. Triggers>
40 </ControlTemplate>
41 </Setter. Value>
42 </Setter>
43 </Style>
44 </Window. Resources>
45 <DockPanel>
46 <TabControl TabStripPlacement = "Left">
47 <local: CustomItem Header = "Tab1" Width = "80" Height = "80" Icon = "Resources/greentouch2.jpg">
48 <Label Content = "adadada"> </Label>
49 </local: CustomItem>
50 <local: CustomItem Header = "Tab2" Width = "80" Height = "80" Icon = "Resources/background2.jpg"> </local: CustomItem>
51 </TabControl>
52 </DockPanel>
53 </Window>
