You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: controls/tabview/templates.md
+26-5Lines changed: 26 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,15 +11,36 @@ position: 14
11
11
12
12
The TabView provides set of templates for its elements. If you want to change the TabView appearance you can use the provided templates:
13
13
14
-
*`HeaderTemplate` (`ControlTemplate`)—Defines the template of the entire header area. This includes the tabs in the Header (Header area + Header items).
14
+
*`HeaderTemplate` (`ControlTemplate`)—Defines the template of the entire TabView Header. This includes the tabs in the Header (Header area + Header items).
15
15
*`HeaderItemTemplate` (`ControlTemplate`)—Defines the template of the individual header items.
16
-
*`ContentTemplate` (`ControlTemplate`)—Defined the template of the entire content area.
16
+
*`ContentTemplate` (`ControlTemplate`)—Defined the template of the entire TabView Content.
17
17
18
18

19
19
20
-
21
-
22
-
>note If you do not want to change the default templates you can customize the look of the TabView, TabView Header, TabView `HeaderItem` and TabView Content using the flexible styling API. For more details review the [TabView Styling article]({%slug tabview-styling%}).
20
+
**Example with TabView templates**
21
+
22
+
```XAML
23
+
<telerik:RadTabViewx:Name="tabView">
24
+
<telerik:RadTabView.HeaderItemTemplate>
25
+
<ControlTemplate>
26
+
<!-- the custom HeaderItemTemplate implementation -->
27
+
</ControlTemplate>
28
+
</telerik:RadTabView.HeaderItemTemplate>
29
+
<telerik:RadTabView.HeaderTemplate>
30
+
<ControlTemplate>
31
+
<!-- the custom HeaderTemplate implementation -->
32
+
</ControlTemplate>
33
+
</telerik:RadTabView.HeaderTemplate>
34
+
<telerik:RadTabView.ContentTemplate>
35
+
<ControlTemplate>
36
+
<!-- the custom ContentTemplate implementation -->
37
+
</ControlTemplate>
38
+
</telerik:RadTabView.ContentTemplate>
39
+
</telerik:RadTabView>
40
+
```
41
+
42
+
> If you want to review the default TabView `HeaderTemplate`, `HeaderItemTemplate` and `ContentTemplate`, add the [TelerikTheming]({%slug themes-overview%}) to the project and go to `TelerikTheming/Styles/Platform/TabView.xaml` file.
43
+
> If you do not want to change the default templates you can customize the look of the TabView, TabView Header, TabView `HeaderItem` and TabView Content using the flexible styling API. For more details review the [TabView Styling article]({%slug tabview-styling%}).
0 commit comments