Uno.UI.Toolkit TabBar

[kazo0]

Description

This is a proposal for a new control that provides a list of selectable items that can be used to drive things like navigation or changes in the current view. The idea would be similar to the Top NavigationView as shown in the Fluent section of the Reference Material. We should be able to template the TabBarItems and style them as we want. This would be a primitive control that can be used in more complex controls like the TabPresenter or BottomNavigationView.

API

TabBar : Control

Property	Type	Default Value
ItemsSource	object	null
ItemTemplateSelector	DataTemplateSelector	null
ItemTemplate	DataTemplate	null
ItemContainerStyleSelector	StyleSelector	null
ItemContainerStyle	Style	null
ItemsPanel	ItemsPanelTemplate	null
Items	IList<object>	null
SelectedItem	object	null
CanShowOverflow	bool	false
OverflowButtonStyle	Style	null
SelectionIndicatorPlacement	SelectionIndicatorPlacement	SelectionIndicatorPlacement.Below
SelectionIndicator	UIElement	null
SelectionIndicatorStyle	Style	null
SelectionIndicatorTemplate	DataTemplate	null

Event	Type	Description
SelectedItemChanged	TabBarSelectedItemChangedEventHandler	Event that is raised when the selected tab changed

<Style TargetType="TabBar">
	<Setter Property="IsTabStop"
			Value="False" />
	<Setter Property="OverflowButtonStyle"
			Value="{StaticResource TabBarOverflowButtonStyle}" />
	<Setter Property="ItemsPanel">
		<Setter.Value>
			<ItemsPanelTemplate>
				<ItemsStackPanel Orientation="Horizontal" />
			</ItemsPanelTemplate>
		</Setter.Value>
	</Setter>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="TabBar">
				<Grid x:Name="RootGrid">
					<Grid x:Name="TabBarGrid"
							Background="{TemplateBinding Background}"
							Height="{ThemeResource TabBarHeight}">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition Width="Auto" />
						</Grid.ColumnDefinitions>
						<ListView x:Name="TabBarItemsHost"
									Grid.Column="0"
									AutomationProperties.LandmarkType="Navigation"
									IsItemClickEnabled="True"
									ItemTemplate="{TemplateBinding ItemTemplate}"
									ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
									ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
									ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"
									ItemsPanel="{TemplateBinding ItemsPanel}"
									ScrollViewer.HorizontalScrollBarVisibility="Hidden"
									ScrollViewer.HorizontalScrollMode="Disabled"
									ScrollViewer.VerticalScrollBarVisibility="Hidden"
									ScrollViewer.VerticalScrollMode="Disabled"
									SelectionMode="Single"
									SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}" />

						<ContentPresenter x:Name="SelectionIndicatorPresenter"
											Content="{TemplateBinding SelectionIndicator}"
											ContentTemplate="{TemplateBinding SelectionIndicatorTemplate}"
											Style="{TemplateBinding SelectionIndicatorStyle}" />

						<Button x:Name="TabBarOverflowButton"
								Grid.Column="1"
								Content="More"
								Style="{TemplateBinding OverflowButtonStyle}"
								Visibility="Collapsed">

							<Button.Flyout>
								<Flyout Placement="Bottom">
									<Flyout.FlyoutPresenterStyle>
										<!-- Based on is required until https://github.com/unoplatform/uno/issues/119 is fixed -->
										<Style BasedOn="{StaticResource DefaultFlyoutPresenter}"
												TargetType="FlyoutPresenter">
											<Setter Property="Padding"
													Value="0,8" />
											<!-- Set negative top margin to make the flyout align exactly with the button -->
											<Setter Property="Margin"
													Value="0,-4,0,0" />
										</Style>
									</Flyout.FlyoutPresenterStyle>
									<ListView x:Name="TabBarItemsOverflowHost"
												IsItemClickEnabled="True"
												ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
												ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"
												ItemTemplate="{TemplateBinding ItemTemplate}"
												ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
												SingleSelectionFollowsFocus="False" />

								</Flyout>
							</Button.Flyout>
						</Button>
					</Grid>
				</Grid>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

TabBarItemBase : Selector

Properties derived from ListViewItem

Property	Type	Default Value
Command	ICommand	null
CommandParameter	object	null

TabBarItem : TabBarItemBase

Property	Type	Default Value
Icon	IconElement	null
SelectedIcon	IconElement	null
BadgeText	string	null
BadgeForeground	Brush	null
BadgeBackground	Brush	null
SelectedBadgeForeground	Brush	null
SelectedBadgeBackground	Brush	null
SelectedForeground	Brush	null
SelectedBackground	Brush	null

<Style TargetType="local:TabBarItem">
    <Setter Property="Foreground" Value="{ThemeResource TabBarItemForeground}" />
    <Setter Property="Background" Value="{ThemeResource TabBarItemBackground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource TabBarItemBorderBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource TabBarItemBorderThickness}" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TabBarItem">
                <TabBarItemPresenter
                    x:Name="TabBarItemPresenter"
                    Icon="{TemplateBinding Icon}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Margin="{TemplateBinding Margin}"
                    Padding="{TemplateBinding Padding}"
                    Foreground="{TemplateBinding Foreground}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                    Content="{TemplateBinding Content}"
                    IsTabStop="False" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TabBarItemSeparator : TabBarItemBase

No specific properties

<Style TargetType="local:TabBarItemSeparator">
    <Setter Property="IsEnabled" Value="False" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="MinHeight" Value="0" />
    <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="TabBarSeparatorLineStates">
                            <VisualState x:Name="HorizontalLine" />
                            <VisualState x:Name="VerticalLine">
                                <VisualState.Setters>
                                    <Setter Target="SeparatorLine.Height" Value="20" />
                                    <Setter Target="SeparatorLine.Width" Value="1" />
                                    <Setter Target="SeparatorLine.Margin" Value="10,0" />
                                    <Setter Target="SeparatorLine.VerticalAlignment" Value="Center" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle 
                        x:Name="SeparatorLine"
                        Height="1"
                        Margin="16,10"
                        Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TabBarItemPresenter : ContentControl

Property	Type	Default Value
Icon	IconElement	null

    <Style TargetType="TabBarItemPresenter">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabBarItemPresenter">
                    <Grid 
                        x:Name="LayoutRoot" 
                        Background="{TemplateBinding Background}"
                        Control.IsTemplateFocusTarget="True">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="PointerStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TabBarItemBackgroundPointerOver}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource TabBarItemBackgroundPointerOver}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TabBarItemForegroundPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabBarItemForegroundPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TabBarItemBackgroundPressed}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource TabBarItemBackgroundPressed}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TabBarItemForegroundPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabBarItemForegroundPressed}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TabBarItemBackgroundSelected}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource TabBarItemBackgroundSelected}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TabBarItemForegroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabBarItemForegroundSelected}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TabBarItemBackgroundPointerOver}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource TabBarItemBackgroundSelectedPointerOver}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TabBarItemForegroundPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabBarItemForegroundPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TabBarItemBackgroundPressed}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource TabBarItemBackgroundSelectedPressed}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TabBarItemForegroundPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabBarItemForegroundPressed}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled"/>
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TabBarItemForegroundDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabBarItemForegroundDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="TabBarIconPositionStates">
                                <VisualState x:Name="IconOnLeft" />
                                <VisualState x:Name="IconOnly">
                                    <VisualState.Setters>
                                        <Setter Target="PointerRectangle.Visibility" Value="Visible" />
                                        <Setter Target="LayoutRoot.Width" Value="48" />
                                        <Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
                                        <Setter Target="SelectionIndicatorGrid.Margin" Value="4,0,4,4" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="ContentOnly">
                                    <VisualState.Setters>
                                        <Setter Target="IconBox.Visibility" Value="Collapsed" />
                                        <Setter Target="ContentPresenter.Margin" Value="12,0" />
                                        <Setter Target="SelectionIndicatorGrid.Margin" Value="12,0,12,4" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle 
                            x:Name="PointerRectangle" 
                            Fill="Transparent"
                            Visibility="Collapsed" />
                        <Grid x:Name="ContentGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Viewbox 
                                x:Name="IconBox" 
                                Height="16"
                                Width="16"
                                Margin="16,0,0,0"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center">
                                <ContentPresenter 
                                    x:Name="Icon" 
                                    Content="{TemplateBinding Icon}"
                                    Foreground="{ThemeResource TabBarItemForeground}" />
                            </Viewbox>
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Grid.Column="1"
                                Margin="8,0,16,0"
                                Foreground="{ThemeResourceTabBarItemForeground}"
                                TextWrapping="NoWrap"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                VerticalAlignment="Center"
                                AutomationProperties.AccessibilityView="Raw"/>
                        </Grid>
                        <Grid 
                            x:Name="SelectionIndicatorGrid"
                            Margin="16,0,16,4"
                            VerticalAlignment="Bottom">
                            <Rectangle
                                x:Name="SelectionIndicator"
                                Height="2"
                                Fill="{ThemeResource TabBarSelectionIndicatorForeground}"
                                Opacity="0" />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Reference Material

Fluent

Material

Custom Styling

[kazo0]

Thoughts about having the TabBar contain a list of ITabBarItems: this way we can create our own custom TabBarItem. For example, we can have a TabBarFabButton that we can style and include in the TabBar itself.

[Xiaoy312]

That custom styling is going to be hard to realize, if we have to go through ItemPanelTemplate and ItemContainerStyle, instead of having a direct access to the panel and the children.

[kazo0]

You're saying we should expose an ItemContainerStyle on the TabBar itself?

[Xiaoy312]

These are the property of a collection control usually (eg: ListView, TreeView...). What I was trying to say this that this type of scenario is probably better suited for a custom control or a composition of them, since it has a very unique look.
It should out of the scope of TabBar.

[Xiaoy312]

Will the page content be part of the TabBar or separated from it? Is more like (NavigationView>NavigationViewItem*3) or Frame+(StackPanel>Button*3)

[kazo0]

Well the TabBar is supposed to be a simple control that can be a part of larger, more complex controls. So we can build a BottomNavigationView using a TabBar I guess. I don't know, my thought was originally for this to be specific for Page navigation so the Page content would be part of the TabBar but this also should be re-used for building things similar to Xamarin Community Toolkit's TabView

[Xiaoy312]

Do we have plan to make this data-bindable (compatible with mvvm)?

[Xiaoy312]

{ITabBarItem, TabBarToggleButton, TabBarSeparator} are view layer classes, and they shouldnt be leaked into the view-model layer.
I was asking if we have to plan make something like this possible:

public string[] Items => "Store,Buy,Expenses,Settings".Split(',');

<TabBar Items="{x:Bind Items}">
    <TabBar.ItemTemplate>
        <DataTemplate>
            <StackPanel>
               <TextBlock Text="{Binding}" />
               <GlyphIcon Glyph="{Binding Converter={...}}" />

[kazo0]

Hmm, I didn't think about that. If we go this route, does that mean we would get rid of the idea of TabBarToggleButton, ITabBarItem, etc? I'm confused how we would define a default item template that displays an Icon and a Title

[kazo0]

I think I'd rather constrict the type of things you can have in a TabBar, it shouldn't be as generic as a ListView

[kazo0]

I guess it should act more like the MUXC NavigationView, where it accepts objects and wraps them in a NavigationViewItem? I'm still fuzzy on how that works exactly and how it presents things like the Icon

[Xiaoy312]

Typically on ItemsControl, you could override these:

bool IsItemItsOwnContainerOverride(object item) => item is TabBarToggleButton
DependencyObject GetContainerForItemOverride() => new TabBarToggleButton()

to generate the container, and then use these method for setup or teardown:

void PrepareContainerForItemOverride(DependencyObject container, object item)
{
    container.Style = ItemContainerStyle ?? ItemContainerStyleSelector?.SelectStyle(item, container);
    container.DataContext = item;
    container.ContentTemplate = ItemTemplate;
    if (container.GetBindingExpression(ContentControl.ContentProperty) == null)
    {
        container.SetBinding(ContentControl.ContentProperty, new Binding());
    }
}
void ClearContainerForItemOverride(DependencyObject container, object item)
{
    container.ClearValue(ContentControl.ContentProperty);
    //...
}

---

Normally, you dont have to worry about the icon and stuff using the binding method, as they will be implemented via ItemTemplate.

[davidjohnoliver]

Gonna start a new thread with my thoughts, because there's relevant points scattered across various threads.

• Re: ITabBarItem: Interfaces aren't very idiomatic on XAML views in WinUI. That's not to say we can't do it, but I think there should be a compelling reason to.
• @kazo0 you say you want to "constrict the type of things you can have in a TabBar" - can you say why? What about having, for example, a TabBarItem which inherits from ContentControl (or even SelectorItem) and has a Content property which can be pretty much anything (a string, a FrameworkElement, a view-model object, etc)? What problems do you see with that?
• If this is primarily a primitive that would be part of a more complex navigation control (ie BottomNavigationView) then some exploratory design of such a control is warranted, to see what it would need from a TabBar.

[kazo0]

Starting to re-think some decisions. I originally was going about this by basing it off of CommandBar/AppBar. But it seems to make more sense to base this off of NavigationView. Which does allow a collection of general objects as a source. Which means we need to use some of the same logic of wrapping these items as a TabBarItem.

The more I think about it, the TabBar really should be seen as a "BottomNavigationView", where it should be used for page-level navigation. Not so much as a primitive that will be used in larger controls. And the TopTabBar/TabPresenter/better name for TabView is its own control. But they should somehow share some common parts that we can extract later I guess?

[davidjohnoliver]

NavigationView contains the NavigationViewList which is a similar composable primitive - https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.navigationviewlist

[kazo0]

I think that's more what was asked for a TabBar, then later we could create a BottomNavigationView that is composed of a TabBar. So this discussion should just be about the bar that displays items in a horizontal list and tracks selection, I keep mixing up the two in my head and I should create a new Discussion for BottomNavigationView.

In that case, this would just be a basic control that inherits from ListView?