CODEWITHSUNDEEP
c#winui-3winui
Tomas Bentolila
Tomas Bentolila

Reputation: 45

How do you add a page to a WinUI 3 project created with template studio?

I know this is a simple question but I just can't figure out how to add a new page after creating a WinUI 3 with template studio (and I don't want to make another project just to add another page). I can see that template studio auto creates a navigation helper which navigates to the pages but when i use the helpers it just throws an exception. (ShellPage.xaml)

<Page
    x:Class="WinUI_App.Views.ShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:helpers="using:WinUI_App.Helpers"
    xmlns:behaviors="using:WinUI_App.Behaviors"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    Loaded="OnLoaded"
    Style="{StaticResource PageStyle}">

    <NavigationView
        x:Name="navigationView"
        IsBackButtonVisible="Visible"
        IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
        SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
        IsSettingsVisible="True"
        ExpandedModeThresholdWidth="1280"
        Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}"
        Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
        <NavigationView.MenuItems>
            <!--
            TODO: Change the symbols for each item as appropriate for your app
            More on Segoe UI Symbol icons: https://learn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
            Or to use an IconElement instead of a Symbol see https://github.com/microsoft/TemplateStudio/blob/main/docs/UWP/projectTypes/navigationpane.md
            Edit String/en-US/Resources.resw: Add a menu item title for each page
            -->
            
            <NavigationViewItem x:Uid="Shell_Main" Icon="ThreeBars" helpers:NavigationHelper.NavigateTo="WinUI_App.ViewModels.MainViewModel" />
            <NavigationViewItem x:Uid="Shell_ListDetails" Icon="list" helpers:NavigationHelper.NavigateTo="WinUI_App.ViewModels.ListDetailsViewModel" />
        </NavigationView.MenuItems>
        <NavigationView.HeaderTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock
                        Text="{Binding}"
                        Style="{ThemeResource TitleTextBlockStyle}"
                        Margin="{StaticResource SmallLeftRightMargin}" />
                </Grid>
            </DataTemplate>
        </NavigationView.HeaderTemplate>
        <i:Interaction.Behaviors>
            <behaviors:NavigationViewHeaderBehavior
                DefaultHeader="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
                <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock
                                Text="{Binding}"
                                Style="{ThemeResource TitleTextBlockStyle}"
                                Margin="{StaticResource SmallLeftRightMargin}" />
                        </Grid>
                    </DataTemplate>
                </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
            </behaviors:NavigationViewHeaderBehavior>
        </i:Interaction.Behaviors>
        <Grid>
            <Frame x:Name="shellFrame" />
        </Grid>
        <NavigationView.FooterMenuItems>
            <NavigationViewItem Content="Account" Tag="SamplePage4" Icon="Contact"/>
        </NavigationView.FooterMenuItems>
    </NavigationView>
</Page>

Can anyone help me please I can share more code if needed.

Upvotes: 1

Views: 1758

Answers (1)

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13331

Let's say that you want to add a "TestPage":

  1. Add a new page named TestPage.xaml in the Views folder
  2. Create a TestViewModel.cs a TestViewModel class in the ViewModels folder and implement it. (Use other pages as a reference for how to implement it.)
  3. Register TestViewModel class as a service in App.xaml.cs
  4. Register TestViewModel and TestPage in PageService.cs
  5. Add a NavigationViewItem for TestPage in ShellPage.xaml
  6. Add a string resource in Resources.resw for Shell_TestPage.Content

Upvotes: 2

Related Questions