在.NET MAUI中使用Sharpnado Tabs加载页面遇泛型参数错误求助

错误原因 #

Sharpnado.Tabs的LazyView<T>泛型组件要求T必须是VisualElement的子类，但你传入的HomePage和ProfilePage是ContentPage类型——虽然ContentPage继承自VisualElement，但ViewSwitcher设计用于切换视图（如ContentView）而非独立页面（Page），直接传入ContentPage会触发泛型参数不匹配的异常。

解决方案 #

1. 将页面内容重构为ContentView #

把HomePage和ProfilePage的内容提取为ContentView子类，ViewSwitcher更适合管理视图切换而非页面导航：

HomeView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestingMAUI.Views.HomeView">
    <VerticalStackLayout>
        <Label
            Text="Welcome to Home View!"
            VerticalOptions="Center"
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentView>

ProfileView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestingMAUI.Views.ProfileView">
    <VerticalStackLayout>
        <Label
            Text="Welcome to Profile View!"
            VerticalOptions="Center"
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentView>

2. 修改HomeTabbedPage的ViewSwitcher配置 #

更新LazyView的泛型参数为新的ContentView子类，并关联标签与视图的选中状态：

HomeTabbedPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestingMAUI.Pages.HomeTabbedPage"
             xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material"
             xmlns:tabs="http://sharpnado.com"
             xmlns:Views="clr-namespace:TestingMAUI.Views">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="BottomTab" TargetType="tabs:BottomTabItem">
                <Setter Property="SelectedTabColor" Value="Gray" />
                <Setter Property="UnselectedLabelColor" Value="#00928A" />
                <Setter Property="LabelSize" Value="36" />
                <Setter Property="FontFamily" Value="OpenSansExtraBold" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid Margin="16,0" RowDefinitions="120,*,95">

        <tabs:ViewSwitcher x:Name="Switcher" Margin="0" Animate="True" Grid.RowSpan="3">
            <tabs:LazyView x:TypeArguments="Views:HomeView" />
            <tabs:LazyView x:TypeArguments="Views:ProfileView" />
        </tabs:ViewSwitcher>

        <tabs:TabHostView Grid.Row="2" CornerRadius="30" IsSegmented="True" Orientation="Horizontal" TabType="Fixed"
                          SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
            <tabs:BottomTabItem Style="{StaticResource BottomTab}" Label="Home" />
            <tabs:BottomTabItem Style="{StaticResource BottomTab}" Label="Profile" />
        </tabs:TabHostView>

    </Grid>
</ContentPage>

关键说明 #

• 双向绑定TabHostView.SelectedIndex与ViewSwitcher.SelectedIndex，确保点击标签时自动切换对应视图。
• LazyView会延迟加载视图内容，提升页面初始化性能，符合Sharpnado Tabs的设计初衷。

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