Skip to content

Commit 9e018f7

Browse files
committed
update templates
1 parent 6438c77 commit 9e018f7

File tree

1 file changed

+26
-5
lines changed

1 file changed

+26
-5
lines changed

controls/tabview/templates.md

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,36 @@ position: 14
1111

1212
The TabView provides set of templates for its elements. If you want to change the TabView appearance you can use the provided templates:
1313

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).
1515
* `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.
1717

1818
![.NET MAUI TabView Visual Structure](images/visual-structure.png "Visual elements of TabView control")
1919

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:RadTabView x: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%}).
2344
2445
## See Also
2546

0 commit comments

Comments
 (0)