Skip to content

Commit ba1dca4

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1173 from telerik/new-kb-gradient-header-tabview-dotnet-maui-d547c47d8a8c407b9ff881891aa370ab
Added new kb article gradient-header-tabview-dotnet-maui
2 parents 3981fc3 + b491460 commit ba1dca4

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

‎knowledge-base/gradient-header-tabview-dotnet-maui.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Applying Gradient to TabView Header for .NET MAUI
3+
description: Learn how to apply a gradient background to the Header of the TabView component in .NET MAUI.
4+
type: how-to
5+
page_title: Setting Gradient Background for TabView Header in .NET MAUI
6+
slug: gradient-header-tabview-dotnet-maui
7+
tags: tabview,.net maui, header, gradient, tabviewheaderitem
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
| Version | Product | Author |
14+
| --- | --- | ---- |
15+
| 11.0.0 | Telerik UI for .NET MAUI TabView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
16+
17+
## Description
18+
19+
I want to apply a gradient effect to the entire header of the [TabView]({%slug tabview-overview%}) component in .NET MAUI, not just individual header items. Additionally, I need transparency for the background and border properties of the header items.
20+
21+
This knowledge base article also answers the following questions:
22+
- How to style the TabView header with a gradient in .NET MAUI?
23+
- How to use `HeaderTemplate` for TabView in .NET MAUI?
24+
- How to apply transparency to TabView header items in .NET MAUI?
25+
26+
## Solution
27+
28+
To achieve a gradient effect for the entire TabView header and apply transparency to the header items, follow these steps:
29+
30+
1. Define a `LinearGradientBrush` resource for the gradient effect.
31+
2. Create a `ControlTemplate` for the header and use the gradient brush in its background property.
32+
3. Set transparency for the header item background and border properties using the `HeaderItemStyle`.
33+
34+
```xaml
35+
<ContentPage.Resources>
36+
<ResourceDictionary>
37+
<!-- Gradient Brush for Header Background -->
38+
<LinearGradientBrush x:Key="brush" StartPoint="0,0" EndPoint="1,1">
39+
<GradientStop Color="Blue" Offset="0.0"/>
40+
<GradientStop Color="Blue" Offset="0.4"/>
41+
<GradientStop Color="Red" Offset="0.6"/>
42+
<GradientStop Color="Red" Offset="1.0"/>
43+
</LinearGradientBrush>
44+
45+
<!-- Header Control Template -->
46+
<ControlTemplate x:Key="TabViewHeaderControlTemplate">
47+
<telerikMauiControls:RadBorder Background="{StaticResource brush}"
48+
BorderColor="{TemplateBinding BorderColor}"
49+
BorderThickness="{TemplateBinding BorderThickness}"
50+
CornerRadius="{TemplateBinding CornerRadius}"
51+
Padding="{TemplateBinding ContentPadding}"
52+
AutomationId="RadTabViewHeader">
53+
<ContentPresenter />
54+
</telerikMauiControls:RadBorder>
55+
</ControlTemplate>
56+
</ResourceDictionary>
57+
</ContentPage.Resources>
58+
59+
<telerik:RadTabView x:Name="tabView" HeaderTemplate="{StaticResource TabViewHeaderControlTemplate}">
60+
<!-- Style for Header Items -->
61+
<telerik:RadTabView.HeaderItemStyle>
62+
<Style TargetType="telerik:TabViewHeaderItem">
63+
<Setter Property="FontAttributes" Value="Italic"/>
64+
<Setter Property="TextColor" Value="#99000000" />
65+
<Setter Property="Background" Value="Transparent"/>
66+
<Setter Property="BackgroundColor" Value="Transparent"/>
67+
<Setter Property="BorderColor" Value="Transparent"/>
68+
</Style>
69+
</telerik:RadTabView.HeaderItemStyle>
70+
71+
<!-- Tab Items -->
72+
<telerik:TabViewItem HeaderText="Home">
73+
<Label Margin="10" Text="This is the content of the Home tab" />
74+
</telerik:TabViewItem>
75+
<telerik:TabViewItem HeaderText="Folder">
76+
<Label Margin="10" Text="This is the content of the Folder tab" />
77+
</telerik:TabViewItem>
78+
<telerik:TabViewItem HeaderText="View">
79+
<Label Margin="10" Text="This is the content of the View tab" />
80+
</telerik:TabViewItem>
81+
</telerik:RadTabView>
82+
```
83+
84+
## See Also
85+
86+
- [TabView Documentation]({%slug tabview-overview%})
87+
- [Applying Gradient to TabView Header Item for .NET MAUI]({%slug gradient-header-item-tabview-dotnet-maui%})

‎knowledge-base/gradient-headeritem-tabview-dotnet-maui.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Applying Gradient to TabView Header Item for .NET MAUI
3+
description: Learn how to apply a gradient background to the Header Item of the TabView component in .NET MAUI.
4+
type: how-to
5+
page_title: Setting Gradient Background for TabView Header Item in .NET MAUI
6+
slug: gradient-header-item-tabview-dotnet-maui
7+
tags: tabview,.net maui, header item, gradient, tabviewheaderitem
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
| Version | Product | Author |
14+
| --- | --- | ---- |
15+
| 11.0.0 | Telerik UI for .NET MAUI TabView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
16+
17+
## Description
18+
19+
I want to apply a gradient background to the header items of the [TabView]({%slug tabview-overview%}) component in .NET MAUI. The headers' background needs to be styled using a `LinearGradientBrush` while maintaining custom styling for other properties like `FontAttributes` and `TextColor`.
20+
21+
This knowledge base article also answers the following questions:
22+
- How to set a gradient background for TabView headers in .NET MAUI?
23+
- How to customize TabView `HeaderItemStyle` in .NET MAUI?
24+
- How to use `LinearGradientBrush` in TabView `HeaderItemStyle`?
25+
26+
## Solution
27+
28+
To apply a gradient background to the headers in the TabView component, define a custom `HeaderItemStyle` targeting the `TabViewHeaderItem`. Use the `LinearGradientBrush` to specify the gradient background. Below is an example implementation:
29+
30+
```xml
31+
<telerik:RadTabView x:Name="tabView">
32+
<telerik:RadTabView.HeaderItemStyle>
33+
<Style TargetType="telerik:TabViewHeaderItem">
34+
<!-- Customize font style -->
35+
<Setter Property="FontAttributes" Value="Italic"/>
36+
<!-- Customize text color -->
37+
<Setter Property="TextColor" Value="#99000000" />
38+
<!-- Apply gradient background -->
39+
<Setter Property="Background">
40+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
41+
<GradientStop Color="Blue" Offset="0.0"/>
42+
<GradientStop Color="Blue" Offset="0.4"/>
43+
<GradientStop Color="Red" Offset="0.6"/>
44+
<GradientStop Color="Red" Offset="1.0"/>
45+
</LinearGradientBrush>
46+
</Setter>
47+
</Style>
48+
</telerik:RadTabView.HeaderItemStyle>
49+
<!-- Define TabView items -->
50+
<telerik:TabViewItem HeaderText="Home">
51+
<Label Margin="10" Text="This is the content of the Home tab" />
52+
</telerik:TabViewItem>
53+
<telerik:TabViewItem HeaderText="Folder">
54+
<Label Margin="10" Text="This is the content of the Folder tab" />
55+
</telerik:TabViewItem>
56+
<telerik:TabViewItem HeaderText="View">
57+
<Label Margin="10" Text="This is the content of the View tab" />
58+
</telerik:TabViewItem>
59+
</telerik:RadTabView>
60+
```
61+
62+
## See Also
63+
64+
- [TabView Documentation]({%slug tabview-overview%})
65+
- [Applying Gradient to TabView Header for .NET MAUI]({%slug gradient-header-tabview-dotnet-maui%})

0 commit comments

Comments
 (0)