Skip to content

Commit 845f1fa

Browse files
didiyordanovadidiyordanova
committed
add another kb article for gradient color for header
1 parent 81e2302 commit 845f1fa

File tree

2 files changed

+108
-20
lines changed

2 files changed

+108
-20
lines changed

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

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,37 +16,59 @@ res_type: kb
1616

1717
## Description
1818

19-
I want to apply a gradient background to the headers of the TabView 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`.
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.
2020

2121
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`?
22+
- How to style TabView header with 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?
2525

2626
## Solution
2727

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:
28+
To achieve a gradient effect for the entire TabView header and apply transparency to the header items, follow these steps:
2929

30-
```xml
31-
<telerik:RadTabView x:Name="tabView">
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 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 -->
3261
<telerik:RadTabView.HeaderItemStyle>
3362
<Style TargetType="telerik:TabViewHeaderItem">
34-
<!-- Customize font style -->
3563
<Setter Property="FontAttributes" Value="Italic"/>
36-
<!-- Customize text color -->
3764
<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>
65+
<Setter Property="Background" Value="Transparent"/>
66+
<Setter Property="BackgroundColor" Value="Transparent"/>
67+
<Setter Property="BorderColor" Value="Transparent"/>
4768
</Style>
4869
</telerik:RadTabView.HeaderItemStyle>
49-
<!-- Define TabView items -->
70+
71+
<!-- Tab Items -->
5072
<telerik:TabViewItem HeaderText="Home">
5173
<Label Margin="10" Text="This is the content of the Home tab" />
5274
</telerik:TabViewItem>
@@ -61,4 +83,5 @@ To apply a gradient background to the headers in the TabView component, define a
6183

6284
## See Also
6385

64-
- [TabView Documentation](https://docs.telerik.com/devtools/maui/controls/tabview/overview)
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)