TabbedCommandBar not working Windows App SDK 0.8

[nlogozzo]

When will the TabbedCommandBar be ported to Project Reunion?

[ghost]

Hello nlogozzo, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[michael-hawker]

@nlogozzo it's already been in our Windows App SDK releases as have all our controls. If you're having a specific problem with getting it to work, please provide more details.

See our discussion on the release here: #3912

[nlogozzo]

@michael-hawker I have the following XAML:

<Window
    x:Class="NickvisionApp.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NickvisionApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wct="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
        <wct:TabbedCommandBar Name="Ribbon" HorizontalAlignment="Stretch" VerticalAlignment="Top">
            <wct:TabbedCommandBar.MenuItems>
                <wct:TabbedCommandBarItem Header="Home">
                    <AppBarButton Label="Open Folder" Icon="OpenLocal" Click="OpenFolder"/>
                </wct:TabbedCommandBarItem>
            </wct:TabbedCommandBar.MenuItems>
        </wct:TabbedCommandBar>

        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,80,0,0">
            <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" Width="300" 
                     Header="Name" PlaceholderText="Enter name here"/>
        </Grid>

        <InfoBar Name="InfoBar" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
    </Grid>
</Window>

And this is the resulting window:

Again using Project Reunion 0.8 with WinUI3 and have the following package CommunityToolkit.WinUI.UI.Controls V7.0.3 installed for WCT

[michael-hawker]

@azchohfi can you double-check with 0.8? What do you see?

[michael-hawker]

Thanks Alex for letting me know this is due to microsoft/microsoft-ui-xaml#3502, we can at least provide a work-around for now when we ship an update.

@nlogozzo could you try adding a property to the XAML initialization of the control?

<wct:TabbedCommandBar DefaultStyleResourceUri="ms-appx:///CommunityToolkit.WinUI.UI.Controls.Core/Themes/Generic.xaml" ... >

[nlogozzo]

@michael-hawker My New Xaml:

<Window
    x:Class="NickvisionApp.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NickvisionApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wct="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
        <wct:TabbedCommandBar Name="Ribbon" DefaultStyleResourceUri="ms-appx:///CommunityToolkit.WinUI.UI.Controls.Core/Themes/Generic.xaml" HorizontalAlignment="Stretch" VerticalAlignment="Top">
            <wct:TabbedCommandBar.MenuItems>
                <wct:TabbedCommandBarItem Header="Home">
                    <AppBarButton Label="Open Folder" Icon="OpenLocal" Click="OpenFolder">
                        <AppBarButton.KeyboardAccelerators>
                            <KeyboardAccelerator Modifiers="Control" Key="O"/>
                        </AppBarButton.KeyboardAccelerators>
                    </AppBarButton>
                </wct:TabbedCommandBarItem>

                <wct:TabbedCommandBarItem Header="Help">
                    <AppBarButton Label="GitHub Repo" Icon="Library" Click="GitHubRepo"/>

                    <AppBarButton Label="Report a Bug" Icon="ReportHacked" Click="ReportABug"/>

                    <AppBarButton Label="Buy Me a Coffee" Icon="Like" Click="BuyMeACoffee"/>

                    <AppBarSeparator/>

                    <AppBarButton Label="Changelog" Icon="List" Click="Changelog"/>

                    <AppBarButton Label="About" Icon="Help" Click="About">
                        <AppBarButton.KeyboardAccelerators>
                            <KeyboardAccelerator Modifiers="None" Key="F1"/>
                        </AppBarButton.KeyboardAccelerators>
                    </AppBarButton>
                </wct:TabbedCommandBarItem>
            </wct:TabbedCommandBar.MenuItems>

            <wct:TabbedCommandBar.PaneFooter>
                <CommandBar Background="Transparent" DefaultLabelPosition="Right">
                    <AppBarButton Label="Check for Updates" Icon="Sync" Click="CheckForUpdates"/>
                    
                    <AppBarButton Label="Settings" Icon="Setting" Click="Settings"/>
                </CommandBar>
            </wct:TabbedCommandBar.PaneFooter>
        </wct:TabbedCommandBar>

        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,80,0,0">
            <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" Width="300" 
                     Header="Name" PlaceholderText="Enter name here"/>
        </Grid>

        <InfoBar Name="InfoBar" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
    </Grid>
</Window>

And the new result:

The tabs are missing now

[michael-hawker]

@yoshiask so originally TabbedCommandBar was based off the system NavigationView. WinUI removed the NavigationViewList to replace it with an ItemsRepeater a few versions ago, so since WinUI 3 is based off the latest WinUI 2.x, it means the template is no longer valid.

Now that we have the dependency on WinUI directly anyway, think you'd have time to update the current Toolkit version to be based off the latest WinUI 2.6 templates? That way it should just be a smooth transition to our WinUI 3 branch.

Let us know, thanks!

(@RosarioPulella when you have a minute, would you mind opening a PR to update our WinUI version to the latest 2.6 release? We should do a quick check of the Sample App to see if any controls have broken (like ColorPicker/Button, TokenizingTextBox, etc...))

[nlogozzo]

@michael-hawker So no work around for this as of now? Have to wait for an update...

[yoshiask]

@yoshiask so originally TabbedCommandBar was based off the system NavigationView. WinUI removed the NavigationViewList to replace it with an ItemsRepeater a few versions ago, so since WinUI 3 is based off the latest WinUI 2.x, it means the template is no longer valid.

Now that we have the dependency on WinUI directly anyway, think you'd have time to update the current Toolkit version to be based off the latest WinUI 2.6 templates? That way it should just be a smooth transition to our WinUI 3 branch.

Been a bit busy with my day job, but I should have time this week. Hopefully I can get it done before next week.

[michael-hawker]

We'll fix this as part of a different PR for Windows App SDK

[michael-hawker]

FYI @azchohfi this is all working now in the #4132 PR, so hopefully you won't have problems when merged in the WinUI 3 branch.

[nlogozzo]

When can we see this fix in an update?

[yoshiask]

According to the 7.1 milestone, "mid-2021ish"

[michael-hawker]

Since we updated to the latest WinUI 2.6 styles at the same time, we're waiting for WinUI 3 support for WinUI 2.6 styles before we can ship an update including this fix. Worst case they only ship the updated styles for WinUI 3 when they ship 1.0 later this year, but hopefully one of their next previews would contain them instead.