Feature: Redesign Sidebar control

Motivation and Context

The current sidebar control that is based on NavigationView so far is very good, but it is a little inconvenient to resize the pane, and there is a problem with the design of the items on the pane, so it became necessary to devise a whole new design and create a new control. Unlike before, the new controls are custom controls using resource dictionaries, which is expected to improve the readability and maintainability of the codebase.

Development & co-authors

• #13052
• @yaira2
• @mdtauk
• @chingucoding
• @0x5bfa

Specs

SidebarView (ControlTemplate)

Definition

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Content")]
public class SidebarView : Control

Description

Handles Sidebar controls comprehensively.

Status

• Drafted
• Implemented

Properties

Property name	Type	Description
HeaderItemsSource	object	Gets or sets the object that represents the sidebar items to be used in the header menu. Normally, this type is IList<SidebarViewItemBase>.
MenuItemsSource	object	Gets or sets the object that represents the sidebar items to be used in the main menu. Normally, this type is IList<SidebarViewItemBase>.
FooterMenuItemsSource	object	Gets or sets the object that represents the sidebar items to be used in the footer menu. Normally, this type is IList<SidebarViewItemBase>.
DisplayMode	SideBarDisplayMode	Gets a value that specifies how the pane and content areas of a SidebarView are being shown.
Content	object	Main file list content.
Header	object	Hold TabView and Addressbar.
IsPaneOpen	bool	Is SidebarSplitView’s pane open.
SelectedItem	SidebarViewItemBase	Represents an item selected.
CompactPaneLength	double	Gets or sets the length of the pane in compact mode.
OpenPaneLength	double	Gets or sets the length of the pane in expanded mode (when pane is opened).

Pseudo code template (not actual usage)

<Grid>

    <ContentPresenter Grid.Row="0" Content="{TemplateBinding Header}" />

    <SidebarSplitView
        Grid.Row="1"
        DisplayMode="{TemplateBinding DisplayMode}"
        IsPaneOpen="{TemplateBinding IsPaneOpen}"
        CompactPaneLength="{TemplateBinding CompactPaneLength}"
        OpenPaneLength="{TemplateBinding OpenPaneLength}">

        <SidebarSplitView.Pane>

            <ItemsRepeater Grid.Row="0" ItemsSource="{TemplateBinding HeaderItemsSource}" />

            <ItemsRepeaterScrollHost Grid.Row="1">
                <ScrollViewer>
                    <ItemsRepeater ItemsSource="{TemplateBinding MenuItemsSource}" />
                </ScrollViewer>
            </ItemsRepeaterScrollHost>

            <NavigationViewItemSeparator Grid.Row="2" />

            <ItemsRepeater Grid.Row="3" ItemsSource="{TemplateBinding FooterMenuItemsSource}" />

        </SidebarSplitView.Pane>

        <SidebarSplitView.Content>
            <ContentPresenter Content="{TemplateBinding Content}" />
        <SidebarSplitView.Content>
    </SidebarSplitView>
<Grid/>

Remarks

• The pane toggle button must be implemented in AddressBar.

SidebarSplitView (ControlTemplate)

Definition

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Content")]
public class SidebarSplitView : Control

Description

Implements pane collapse, expanded, and overlay(minimal) modes.

Status

• Drafted
• Implemented

Properties

Property name	Type	Description
DisplayMode	SideBarDisplayMode	Define display mode.
Pane	object	Gets or sets the pane content.
Content	object	Gets or sets the main content. This would display the storage item list view.
CompactPaneLength	double	Gets or sets the length of the pane in compact mode.
OpenPaneLength	double	Gets or sets the length of the pane in expanded mode (when pane is opened).

Pseudo code template (not actual usage)

<Grid>

    <Grid>
        <ContentPresenter Content="{TemplateBinding Pane}" />
    </Grid>

    <Grid Grid.Row="1">

        <ContentPresenter Content="{TemplateBinding Content}" />

        <!--  Light Dismiss  -->
        <Rectangle />

    </Grid>

<Grid/>

SidebarViewItemBase

Definition

public class SidebarViewItemBase : ContentControl

Description

Represents base item class for SidebarViewItem, SidebarViewHeader, and SidebarViewSeparator.

Status

• Drafted
• Implemented

Properties

Property name	Type	Description
IsSelected	bool	Gets or sets the value that indicates whether an item item is selected. Selection indicator will be shown. Header item should not be selectable when pane is in expanded mode, while it should be selectable in compact mode.
IsHeader	bool	Gets or sets the value that indicates whether an item is header. Chevron will be displayed in the right side. The content foreground will be secondary brush. The content font weight will be SemiBold. The icon will be hidden.

SidebarViewItem (ControlTemplate)

Definition

public class SidebarViewItem : SidebarViewItemBase

Description

Implemnts an item of the Sidebar and handles item slelection.

Properties

Property name	Type	Description
IsSelected	bool	Gets or sets the value that indicates whether an item is selected. selection indicator will be shown.
IsPinned	bool	Gets or sets the value that indicates whether an item is pinned. Pin glyph will be shown in the right side.
IsCompacted	bool	Gets or sets the value that indicates whether an item’s icon only should be displayed. Flyout will be shown when clicked an item.
Icon	IconElement	Gets or sets the icon to show the left side of the item text. OpacityIcon cannot be used.
Content	object	Main content. Usually this will be a string text.

Remarks

• TODO: Reorder implementation.
• TODO: Drag & Drop implementation.

Pseudo code template (not actual usage)

<Grid>

    <ContentPresenter Grid.Row="0" Content="{TemplateBinding Icon}" />

    <ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}" />
    <FontIcon Grid.Row="1" Glyph="{StaticResource SidebarViewItemPinGlyph}" Visibility="Collapsed" />

<Grid/>

SidebarViewItemHeader (ControlTemplate)

Definition

public class SidebarViewItemHeader : SidebarViewItemBase

Description

Implemnts an header of the Sidebar. Handle item collase/expand children.

Status

• Drafted
• Implemented

Properties

Property name	Type	Description
Content	object	Main content. Usually this will be a string text.
IsCompacted	bool	Gets or sets the value that indicates whether the item’s icon only should be displayed. Flyout will be shown when clicked an item.
IsExpanded	bool	Gets or sets the value that indicates whether children should be shown.

Pseudo code template (not actual usage)

<Grid>

    <ContentPresenter Grid.Column="0" Content="{TemplateBinding Content}" />

    <FontIcon Grid.Column="1" Glyph="{StaticResource SidebarItemHeaderChevronDownGlyph}" />

<Grid/>

SidebarViewItemSeparator (ControlTemplate)

Definition

public class SidebarViewItemSeparator : SidebarViewItemBase

Description

Implemnts separator between the main pane content and footer content.

Status

• Drafted
• Implemented

Properties

None

Pseudo code template (Not actual usage)

<Grid>
    <Rectangle Fill="{ThemeResource SidebarViewItemSeparatorForeground}" />
</Grid>

Sidebar (UserControl-like)

Definition

public sealed partial class Sidebar : SidebarView

Description

Status

• Drafted
• Implemented

Properties

Property name	Type	Description
ViewModel	SidebarViewModel	Get the ViewModel of the Sidebar.

Pseudo code (not actual usage)

<SidebarView
    x:Class="Files.App.UserControls.Sidebar"
    DataContext="{x:Bind ViewModel, Mode=OneWay}"
    ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}">

    <FlyoutBase.AttachedFlyout>
        <MenuFlyout x:Name="SidebarRootContextMenu" />
    </FlyoutBase.AttachedFlyout>

    <SidebarView.Resources>
        <ResourceDictionary /> <!--  DataTemplates  -->
    <SidebarView.Resources>

    <SidebarView.MenuItemTemplateSelector>
        <templateselectors:SidebarItemTemplateSelector />
    </SidebarView.MenuItemTemplateSelector>

</SidebarView>

Sample actual usage in MainPage

<Sidebar>
    <Sidebar.Header>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <TabView Grid.Row="0" />
            <AddressBar Grid.Row="1" />

        </Grid>
    </Sidebar.Header>

    <InnerNavigationBar />
    <ContentPresenter />
</Sidebar>

SidebarDisplayMode

Definition

public enum SidebarDisplayMode

Description

Defines constants that specify how the pane is shown in a SidebarView.

Status

• Drafted
• Implemented

Fields

Field name	Value	Description
Compact	0	The pane always shows as a narrow sliver which can be opened to full width.
Expanded	1	The pane stays open alongside the content.
Minimal	2	Only the toggle button remains fixed. The pane shows and hides as needed.

Concepts

made by @mdtauk

Overlay mode

Divider and footer items

Visual states of SidebarItem 1

Visual states of SidebarItem 2

Comparison among Collapsed, Expanded, and Overlay

Comparison between Dark and Light theme

[mdtauk]

I would like Tabs and Address Bar to be totally separate from the Sidebar control.

I did so.

[the image]

Doo you want to fix Home item? even if so, is that approved by @yaira2? otherwise, not need to be separated.

Home at the top always was the plan. Other groups possibly customisable in settings

[0x5bfa]

Please give me one more day to elaborate more! @chingucoding But you can adjustto some extent.