How do I set newTab.Content = XAMLElement? (WinUI 3)

Question

I am currently working on a browser using WinUI 3. I have implemented TabView into my browser and whenever my c# code makes a new tab I want it to automatically use the TabContent(XAMLElement) Element from my Xaml file. But always shows an error that looks like this:

this is the code without the popup

private void TabView_AddTabButtonClick(TabView sender, object args)
{
     var newTab = new TabViewItem();
     newTab.IconSource = new SymbolIconSource() { Symbol = Symbol.Document };
     newTab.Header = "New Tab";

     // The Content of a TabViewItem is often a frame which hosts a page.
     newTab.Content = TabContent;
     sender.TabItems.Add(newTab);
}

XAML

<Window
    x:Class="VoidView.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:VoidView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid x:Name="Browser" Margin="0,0,0,0"  Background="#222" >
        <TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested">
            <TabViewItem Height="35" x:Name="HomeTab" Header="Home" IsClosable="False">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Home" />
                </TabViewItem.IconSource>

                <Grid x:Name="TabContent" Margin="0,0,0,0" Background="#282828">
                    <WebView2 x:Name="WebView" Source="https://google.com" Margin="0,52,0,0"/>
                    <Grid Margin="0,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="666">
                        <TextBox x:Name="AddressBar" HorizontalAlignment="Center" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" Width="576" PlaceholderText="Search or type a URL here..." TextAlignment="Center" />
                        <Button Height="32" Width="40" x:Name="Home" Click="Button_Click_1">
                            <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE80F;" Margin="-2,-1,-2,-1"/>
                        </Button>
                        <Button Height="32" Width="40" x:Name="Go" Margin="626,0,0,0" Click="Button_Click">
                            <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE751;" Margin="-2,-1,-2,-1"/>
                        </Button>
                    </Grid>
                    <Button x:Name="Refresh" Margin="0,10,10,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Button_Click" HorizontalAlignment="Right">
                        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xe72c;" Margin="-2,-1,-2,-1"/>
                    </Button>
                    <Button x:Name="Backward" Margin="10,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Backward_Click">
                        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xf0d3;" Margin="-2,-1,-2,-1"/>
                    </Button>
                    <Button x:Name="Forward" Margin="53,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Forward_Click">
                        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xF0D2;" Margin="-2,-1,-2,-1"/>
                    </Button>
                </Grid>
            </TabViewItem>

            <TabView.TabStripHeader>
                <Grid x:Name="ShellTitlebarInset" Background="Transparent" />
            </TabView.TabStripHeader>
            <TabView.TabStripFooter>
                <Grid x:Name="CustomDragRegion" Background="Transparent" />
            </TabView.TabStripFooter>
        </TabView>


    </Grid>
</Window>

App looks like this:

Thank you so much for taking your time and helping others!

Answer 1

This can not work, because the tab content is already added to a TabItem in XAML.

You could instead create a UserControl with all the content and add it to your tabpage:

newTab.Content = MyUserControl;

Or you could create a Frame and navigate to a page

Frame frame = new Frame();
frame.Navigate(typeof(TabPage));
newTab.Content = frame;

You can also check these links out:

https://github.com/microsoft/WinUI-Gallery/blob/winui2/WinUIGallery/ControlPages/TabViewPage.xaml.cs

https://learn.microsoft.com/en-us/windows/apps/design/controls/tab-view

Edit:

To create a new page: Go to the Solutionexplorer in VS-Studio and rightclick on your project -> Add -> New Item -> Emty Page (WinUi3).

After you gave this page a name, you can throw all your xaml content, you want to put on your tabpage, into it.

Now in the typeof, you put the name of your page, which you have created before.