Skip to content

Commit 8c3b393

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #1 from SyncfusionExamples/ScrollButtonCustomization
Scroll button customization
2 parents be595f4 + ba43682 commit 8c3b393

40 files changed

+9184
-0
lines changed

‎README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,48 @@
11
# How-to-Customize-the-Scroll-Button-in-.NET-MAUI-TabView-
22
TThis repository contains a sample explaining how to Customize the Scroll Button in .NET MAUI TabView.
3+
4+
### ScrollButton customization support in .NET MAUI TabView
5+
6+
The `ScrollButtonColor` and `ScrollButtonBackground` properties let you customize the color and background of scroll buttons in the TabView control.
7+
8+
The following code example illustrate how to Customize ScrollButton in SfTabView.
9+
10+
### XAML
11+
12+
```
13+
<Grid VerticalOptions="Start">
14+
<tabView:SfTabView x:Name="tabView" ScrollButtonBackground="Violet" ScrollButtonColor="Red" IsScrollButtonEnabled="True">
15+
16+
<tabView:SfTabItem Header="John">
17+
<StackLayout Padding="10">
18+
<Label Text="John is a software developer with 5 years of experience in building mobile apps."
19+
FontSize="16"
20+
HorizontalOptions="Center"
21+
VerticalOptions="Center"
22+
TextColor="Black" />
23+
</StackLayout>
24+
</tabView:SfTabItem>
25+
26+
<tabView:SfTabItem Header="Emily">
27+
<StackLayout Padding="10">
28+
<Label Text="Emily is a graphic designer who specializes in creating stunning visuals and brand identities."
29+
FontSize="16"
30+
HorizontalOptions="Center"
31+
VerticalOptions="Center"
32+
TextColor="Black" />
33+
</StackLayout>
34+
</tabView:SfTabItem>
35+
</tabView:SfTabView>
36+
</Grid>
37+
38+
```
39+
40+
### C#
41+
42+
```
43+
var tabView = new SfTabView();
44+
tabView.ScrollButtonBackground = SolidColorBrush.Violet;
45+
tabView.ScrollButtonColor = Colors.Red;
46+
```
47+
48+

‎TabView/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TabView"
5+
x:Class="TabView.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎TabView/App.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace TabView
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
protected override Window CreateWindow(IActivationState? activationState)
11+
{
12+
return new Window(new AppShell());
13+
}
14+
}
15+
}

‎TabView/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="TabView.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:TabView"
7+
Shell.FlyoutBehavior="Flyout"
8+
Title="TabView">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TabView/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TabView
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎TabView/MainPage.xaml‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Class="TabView.MainPage"
5+
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView">
6+
7+
<Grid VerticalOptions="Start">
8+
<tabView:SfTabView x:Name="tabView" ScrollButtonBackground="Violet" ScrollButtonColor="Red"
9+
IsScrollButtonEnabled="True">
10+
11+
<tabView:SfTabItem Header="John">
12+
<StackLayout Padding="10">
13+
<Label Text="John is a software developer with 5 years of experience in building mobile apps."
14+
FontSize="16"
15+
HorizontalOptions="Center"
16+
VerticalOptions="Center"
17+
TextColor="Black" />
18+
</StackLayout>
19+
</tabView:SfTabItem>
20+
21+
<tabView:SfTabItem Header="Emily">
22+
<StackLayout Padding="10">
23+
<Label Text="Emily is a graphic designer who specializes in creating stunning visuals and brand identities."
24+
FontSize="16"
25+
HorizontalOptions="Center"
26+
VerticalOptions="Center"
27+
TextColor="Black" />
28+
</StackLayout>
29+
</tabView:SfTabItem>
30+
31+
<tabView:SfTabItem Header="Michael">
32+
<StackLayout Padding="10">
33+
<Label Text="Michael is a project manager known for his exceptional leadership and organizational skills."
34+
FontSize="16"
35+
HorizontalOptions="Center"
36+
VerticalOptions="Center"
37+
TextColor="Black" />
38+
</StackLayout>
39+
</tabView:SfTabItem>
40+
41+
<tabView:SfTabItem Header="Sarah">
42+
<StackLayout Padding="10">
43+
<Label Text="Sarah is a data scientist with expertise in machine learning and artificial intelligence."
44+
FontSize="16"
45+
HorizontalOptions="Center"
46+
VerticalOptions="Center"
47+
TextColor="Black" />
48+
</StackLayout>
49+
</tabView:SfTabItem>
50+
51+
<tabView:SfTabItem Header="David">
52+
<StackLayout Padding="10">
53+
<Label Text="David is a digital marketer skilled in SEO, content creation, and social media strategy."
54+
FontSize="16"
55+
HorizontalOptions="Center"
56+
VerticalOptions="Center"
57+
TextColor="Black" />
58+
</StackLayout>
59+
</tabView:SfTabItem>
60+
61+
<tabView:SfTabItem Header="Alice">
62+
<StackLayout Padding="10">
63+
<Label Text="Alice is a content writer with a flair for crafting compelling stories and articles."
64+
FontSize="16"
65+
HorizontalOptions="Center"
66+
VerticalOptions="Center"
67+
TextColor="Black" />
68+
</StackLayout>
69+
</tabView:SfTabItem>
70+
71+
<tabView:SfTabItem Header="James">
72+
<StackLayout Padding="10">
73+
<Label Text="James is a UI/UX designer focused on creating user-friendly and visually appealing designs."
74+
FontSize="16"
75+
HorizontalOptions="Center"
76+
VerticalOptions="Center"
77+
TextColor="Black" />
78+
</StackLayout>
79+
</tabView:SfTabItem>
80+
81+
<tabView:SfTabItem Header="Sophia">
82+
<StackLayout Padding="10">
83+
<Label Text="Sophia is a business analyst with expertise in identifying growth opportunities."
84+
FontSize="16"
85+
HorizontalOptions="Center"
86+
VerticalOptions="Center"
87+
TextColor="Black" />
88+
</StackLayout>
89+
</tabView:SfTabItem>
90+
91+
<tabView:SfTabItem Header="Robert">
92+
<StackLayout Padding="10">
93+
<Label Text="Robert is a cybersecurity expert dedicated to protecting data and systems from threats."
94+
FontSize="16"
95+
HorizontalOptions="Center"
96+
VerticalOptions="Center"
97+
TextColor="Black" />
98+
</StackLayout>
99+
</tabView:SfTabItem>
100+
</tabView:SfTabView>
101+
</Grid>
102+
</ContentPage>

‎TabView/MainPage.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace TabView
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
}
11+
12+
}

‎TabView/MauiProgram.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
namespace TabView
4+
{
5+
public static class MauiProgram
6+
{
7+
public static MauiApp CreateMauiApp()
8+
{
9+
var builder = MauiApp.CreateBuilder();
10+
builder
11+
.UseMauiApp<App>()
12+
.ConfigureSyncfusionCore()
13+
.ConfigureFonts(fonts =>
14+
{
15+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
16+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
17+
});
18+
19+
#if DEBUG
20+
builder.Logging.AddDebug();
21+
#endif
22+
23+
return builder.Build();
24+
}
25+
}
26+
}

‎TabView/Platforms/Android/AndroidManifest.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

‎TabView/Platforms/Android/MainActivity.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Android.App;
2+
using Android.Content.PM;
3+
using Android.OS;
4+
5+
namespace TabView
6+
{
7+
[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
8+
public class MainActivity : MauiAppCompatActivity
9+
{
10+
}
11+
}

0 commit comments

Comments
 (0)