How can I customize SfTabViewHeader
Hi,
I have a SfTabView. I want to custom TabView Header with next and previous Selected Tab? And set the tab header horizontal alignment is center instead of stretch ?
Please see below screenshot for more details.
Thank and best regards,
TH
Hi Thanh Hai Dang,
Greetings from Syncfusion support!
To customize the SfTabView header with the next and previous selected tabs and center-align the tab headers horizontally, you can use the following approach. Below is the example code snippet along with an explanation to help you understand the implementation.
Here's an example code snippet for your reference:
|
XAML: <Grid ColumnDefinitions="50,*,50" HorizontalOptions="Center" RowDefinitions="50,*"> <Label Text=">" Grid.Column="0" Rotation="180" TextColor="Black" FontSize="Medium" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Background="Transparent"> <Label.GestureRecognizers> <TapGestureRecognizer Tapped="LeftArrowClicked"/> </Label.GestureRecognizers> </Label> <tabView:SfTabView x:Name="tabView" Grid.Column="1" SelectionChanged="tabView_SelectionChanged" TabBarBackground="HotPink"> <tabView:SfTabView.Items > … </tabView:SfTabView.Items> </tabView:SfTabView>
<Label Text=">" Grid.Column="2" TextColor="Black" FontSize="Medium" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Background="Transparent"> <Label.GestureRecognizers> <TapGestureRecognizer Tapped="RightArrowClicked"/> </Label.GestureRecognizers> </Label>
<ContentView Grid.Row="1" Grid.ColumnSpan="3" x:Name="contentView"/> </Grid>
C#:
public partial class MainPage : ContentPage { public MainPage() { InitializeComponent();
if(tabView!=null && call !=null) { contentView.Content = new Call(); } }
private void tabView_SelectionChanged(object sender, TabSelectionChangedEventArgs e) { contentView.Content = null; // Assign content based on the new index switch (e.NewIndex) { case 0: contentView.Content ??= new Call(); break; case 1: contentView.Content ??= new Favorite(); break; case 2: contentView.Content ??= new Contacts(); break; } }
private void LeftArrowClicked(object sender, TappedEventArgs e) { if(tabView!=null) { if (tabView.SelectedIndex > 0) { tabView.SelectedIndex -= 1; } } }
private void RightArrowClicked(object sender, TappedEventArgs e) { if (tabView != null) { if (tabView.SelectedIndex < tabView.Items.Count - 1) { tabView.SelectedIndex += 1; } } } } |
Here’s the explanation:
XAML:
- Grid Layout: The Grid control is used to structure the layout with three columns. The first and third columns are for the navigation arrows, and the middle column is for the SfTabView.
- Left and Right Arrows: Two Label controls are used to display the left ("<") and right (">") arrows. They include TapGestureRecognizer to handle the click events (LeftArrowClicked and RightArrowClicked).
- SfTabView Control: The SfTabView is placed in the middle column of the grid. It contains three SfTabItem controls ("Call", "Favorite", "Contacts"). The SelectionChanged event is used to update the content in the ContentView based on the selected tab.
- ContentView: A ContentView is placed below the SfTabView to display the content corresponding to the selected tab.
Code-Behind:
- The MainPage constructor initializes the content of the first tab ("Call") .
- The tabView_SelectionChanged method updates the content of the ContentView based on the selected tab index.
- The LeftArrowClicked and RightArrowClicked methods update the SelectedIndex of the SfTabView to navigate between tabs.
Additionally, we want to inform you that we have arrow button support in the TabView which helps to scroll the tab headers. By utilizing the IsScrollButtonEnabled property in the TabView, we can achieve this behavior.
For more details, please refer the below help documentation:
Display Type in .NET MAUI Tab View (SfTabView) control | Syncfusion
We hope this helps! If you have any further questions or need additional assistance, please feel free to reach out.
If your requirements differ from this suggested solution, please provide more detailed specifications, it would help us investigate and propose a more accurate solution.
Thank you for your cooperation and understanding.
Regards,
Brundha V
Attachment: TabView_ArrowNavigation_13710d2b.zip
Hi Brundha V,
Thanks for taking the time!
A question please, how can I set the tab header always in
.
Best regards,
TH
Hi Thanh Hai Dang,
Query: how can I set the tab header always in
We want to inform you that, when the TabWidthMode is set to SizeToContent, the header content will move to the scroll view when its width exceeds the actual or assigned width.
To better understand your requirement, could you please elaborate on what you are specifically referring to? Are you expecting to display all header text on the screen without truncation, or do you have a different need? Providing more details will greatly aid us in conducting a more comprehensive analysis and providing a definitive solution.
Additionally, we want to clarify the following behavior of the TabView:
TabWidthMode set to Default: All headers will be displayed on the screen, even contains any number of tab, but the header text might be truncated based on the available width or space.
TabWidthMode set to SizeToContent: The header text will be fully displayed, and if the width exceeds the available space, the headers will move to the scroll view. And the scroll is enabled in this mode to access the items that are outside the visible area.
This is the built-in behavior of the TabView.
For more details, please refer the below help documentation:
Display Type in .NET MAUI Tab View (SfTabView) control | Syncfusion
Please feel free to contact us if you have any further questions or need additional assistance. We are here to help!
Regards,
Brundha V
- 3 Replies
- 2 Participants
-
TH Thanh Hai Dang
- Jul 27, 2024 06:22 PM UTC
- Jul 30, 2024 06:46 AM UTC
