Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Proposal] TabViewΒ #121

@TheCodeTraveler

Description

@TheCodeTraveler

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()
      }
    }
  }
}

Metadata

Metadata

Labels

approvedThis 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 featurehelp wantedThis proposal has been approved and is ready to be implementedpending documentationThis feature requires documentationproposalA fully fleshed out proposal describing a new feature in syntactic and semantic detail

Type

No type

Projects

Status

Closed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions