-
Notifications
You must be signed in to change notification settings - Fork 473
Closed
Labels
approvedThis Proposal has been approved and is ready to be added to the ToolkitThis Proposal has been approved and is ready to be added to the ToolkitchampionA member of the .NET MAUI Toolkit core team has chosen to champion this featureA member of the .NET MAUI Toolkit core team has chosen to champion this featurehelp wantedThis proposal has been approved and is ready to be implementedThis proposal has been approved and is ready to be implementedpending documentationThis feature requires documentationThis feature requires documentationproposalA fully fleshed out proposal describing a new feature in syntactic and semantic detailA fully fleshed out proposal describing a new feature in syntactic and semantic detail
Description
TabView
- Proposed
- Prototype: Not Started
- Implementation: Not Started
- iOS Support
- Android Support
- macOS Support
- Windows Support
- Unit Tests: Not Started
- Sample: Not Started
- Documentation: Not Started
Summary
The TabView control allows the user to display a set of tabs and their content. The TabView is fully customizable, other than the native tab bars
Detailed Design
TabView.shared.cs
public class TabView : ContentView, IDisposable
{
public static readonly BindableProperty TabItemsSourceProperty;
public static readonly BindableProperty TabViewItemDataTemplateProperty;
public static readonly BindableProperty TabContentDataTemplateProperty;
public static readonly BindableProperty SelectedIndexProperty;
public static readonly BindableProperty TabStripPlacementProperty;
public static readonly BindableProperty TabStripBackgroundColorProperty;
public static readonly BindableProperty TabStripBackgroundViewProperty;
public static readonly BindableProperty TabStripBorderColorProperty;
public static readonly BindableProperty TabContentBackgroundColorProperty;
public static readonly BindableProperty TabStripHeightProperty;
public static readonly BindableProperty IsTabStripVisibleProperty;
public static readonly BindableProperty TabContentHeightProperty;
public static readonly BindableProperty TabIndicatorColorProperty;
public static readonly BindableProperty TabIndicatorHeightProperty;
public static readonly BindableProperty TabIndicatorWidthProperty;
public static readonly BindableProperty TabIndicatorViewProperty;
public static readonly BindableProperty TabIndicatorPlacementProperty;
public static readonly BindableProperty IsTabTransitionEnabledProperty;
public static readonly BindableProperty IsSwipeEnabledProperty;
public ObservableCollection<TabViewItem> TabItems { get; }
public IList? TabItemsSource { get; set; }
public DataTemplate? TabViewItemDataTemplate { get; set; }
public DataTemplate? TabContentDataTemplate { get; set; }
public int SelectedIndex { get; set; }
public TabStripPlacement TabStripPlacement { get; set; }
public Color TabStripBackgroundColor { get; set; }
public View? TabStripBackgroundView { get; set; }
public Color TabStripBorderColor { get; set; }
public Color TabContentBackgroundColor { get; set; }
public double TabStripHeight { get; set; }
public bool IsTabStripVisible { get; set; }
public double TabContentHeight { get; set; }
public Color TabIndicatorColor { get; set; }
public double TabIndicatorHeight { get; set; }
public double TabIndicatorWidth { get; set; }
public View? TabIndicatorView { get; set; }
public TabIndicatorPlacement TabIndicatorPlacement { get; set; }
public bool IsTabTransitionEnabled { get; set; }
public bool IsSwipeEnabled { get; set; }
public event TabSelectionChangedEventHandler? SelectionChanged;
public event TabViewScrolledEventHandler? Scrolled;
public void Dispose();
}Usage Syntax
XAML Usage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="MyLittleApp.MainPage">
<Grid>
<xct:TabView
TabStripPlacement="Bottom"
TabStripBackgroundColor="Blue"
TabStripHeight="60"
TabIndicatorColor="Yellow"
TabContentBackgroundColor="Yellow">
<xct:TabViewItem
Icon="triangle.png"
Text="Tab 1"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<Grid
BackgroundColor="Gray">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Icon="circle.png"
Text="Tab 2"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</ContentPage>C# Usage
Content = new Grid
{
new TabVIew
{
TabItems =
{
new TabItem
{
Icon = "circle.png",
Text = "Tab 2",
TextColor = Colors.White,
TextColorSelected = Colors.Yellow,
FontSize = 12
View = new Label { Text = "TabContent2" }.Center()
}
}
}
}sinsedrix, danielftz, domagojmedo, sebfrie, IeuanWalker and 19 morevalliappan16, joseluisct, GODston and aryehsilverdanielftz, XamerDev, valliappan16, joseluisct and aryehsilver
Metadata
Metadata
Assignees
Labels
approvedThis Proposal has been approved and is ready to be added to the ToolkitThis Proposal has been approved and is ready to be added to the ToolkitchampionA member of the .NET MAUI Toolkit core team has chosen to champion this featureA member of the .NET MAUI Toolkit core team has chosen to champion this featurehelp wantedThis proposal has been approved and is ready to be implementedThis proposal has been approved and is ready to be implementedpending documentationThis feature requires documentationThis feature requires documentationproposalA fully fleshed out proposal describing a new feature in syntactic and semantic detailA fully fleshed out proposal describing a new feature in syntactic and semantic detail
Type
Projects
Status
Closed