WinUI 3设置新建TabViewItem的Content为XAML元素报错怎么办

所有XAML框架（包括WinUI 3）中的可视化UI元素遵循单父节点规则：同一个元素实例同一时间只能挂载在一个父容器下，不能同时属于多个父节点。
你当前的代码直接将已经作为HomeTab子元素存在的TabContent实例赋值给新创建的TabViewItem的Content属性，相当于尝试把同一个Grid同时放到两个标签页里，直接触发元素已被其他父元素持有的报错，对应错误提示如下：

你当前实现的应用初始界面如下：

多标签页场景下不能直接复用已经渲染的UI实例，需要将单标签的内容结构抽离为可重复实例化的独立单元，每次新建标签时创建一份新的内容实例即可，这也是WinUI 3 TabView多标签开发的标准实现方式。

步骤1：抽离单标签内容为独立UserControl #

在项目中新建一个用户控件（命名为BrowserTabContent.xaml），将原XAML中TabContentGrid下的所有WebView2、地址栏、导航按钮及对应后台事件逻辑全部迁移到该控件中，控件结构示例：

<UserControl
    x:Class="VoidView.BrowserTabContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid 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" 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" 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" Click="Forward_Click">
            <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xF0D2;" Margin="-2,-1,-2,-1"/>
        </Button>
    </Grid>
</UserControl>

对应的后台代码BrowserTabContent.xaml.cs中，把原来写在MainWindow里的地址栏跳转、前进/后退/刷新/首页按钮的事件逻辑全部迁移过来即可。

步骤2：修改MainWindow的XAML代码 #

移除原来直接写在HomeTab里的TabContent Grid，替换为刚创建的用户控件实例：

<TabViewItem Height="35" x:Name="HomeTab" Header="Home" IsClosable="False">
    <TabViewItem.IconSource>
        <SymbolIconSource Symbol="Home" />
    </TabViewItem.IconSource>
    <!-- 直接引用抽离好的标签页内容控件 -->
    <local:BrowserTabContent/>
</TabViewItem>

步骤3：修改新建标签的后台逻辑 #

点击新建标签按钮时，不要引用已有的UI元素，而是新建一份独立的BrowserTabContent实例作为新标签的内容：

private void TabView_AddTabButtonClick(TabView sender, object args)
{
     var newTab = new TabViewItem();
     newTab.IconSource = new SymbolIconSource() { Symbol = Symbol.Document };
     newTab.Header = "New Tab";
     // 每个标签页持有独立的内容实例，状态互不干扰
     newTab.Content = new BrowserTabContent();
     sender.TabItems.Add(newTab);
}

• 不要采用“先把TabContent从原父节点移除再赋值给新标签”的写法，这种方式会导致原首页标签内容丢失，无法实现多标签同时展示的需求
• 每个标签独立持有WebView2实例的实现，天然符合主流浏览器标签间浏览状态隔离的交互逻辑，如果需要实现跨标签的数据同步，单独封装公共业务逻辑层处理即可，不要在UI元素层面做实例复用

内容的提问来源于stack exchange，提问作者FTCDev