TemplateStudio WinUI 3 Horizontal Navbar

Question

I scaffolded a project with Template Studio for WinUI (C#). During options selection I could not choose horizontal navigation pane. There is vertical navigation pane and horizontal menu bar. I don't need something so complicated like menu bar. I need to change fast between three pages: FileA Generate, FileB Generate and FileC Generate.
I scaffolded Vertical Nav Pane and set option of NavigationViewControl to horizontal but then it overlaped with titlebar and other UI. I started to remove and tweak margins, but I could not find the all the places requiring change. The old Template Studio for UWP had this option, but I want to use WinUI since UWP is deprecated.

1. Using the scaffold tool how can I have a Horizontal Navigation Pane? How to tweak code?
2. Since its a desktop app for simple file generation, do you know better alternatives for page switching? Ex: I saw one page with three tabs switches faster between them in TabView than a navigation Pane.

Answer 1

You just need to make a few changes. This should look better for your use:

• Add row definitions and separate the AppTitleBar and NavigationViewControl.
• Add left margin to the AppTitleBar.
• Remove NavigationViewControl_DisplayModeChanged event handler.

<Grid RowDefinitions="Auto,*">
    <Grid
        x:Name="AppTitleBar"
        Grid.Row="0"
        Height="32"
        Margin="10,0,0,0"
        VerticalAlignment="Top"
        Canvas.ZIndex="1"
        IsHitTestVisible="True">
        <Image
            Width="16"
            Height="16"
            HorizontalAlignment="Left"
            Source="/Assets/WindowIcon.ico" />
        <TextBlock
            x:Name="AppTitleBarText"
            Margin="28,0,0,0"
            VerticalAlignment="Center"
            Style="{StaticResource CaptionTextBlockStyle}"
            TextWrapping="NoWrap" />
    </Grid>
    <NavigationView
        x:Name="NavigationViewControl"
        Grid.Row="1"
        Canvas.ZIndex="0"
        ExpandedModeThresholdWidth="1280"
        Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}"
        IsBackButtonVisible="Visible"
        IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
        IsSettingsVisible="True"
        PaneDisplayMode="Top"
        SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}">
        <NavigationView.MenuItems>
        </NavigationView.MenuItems>
</NavigationView>

To answer your 2nd question, you might want to take a look at the Pivot control.