如何在Xamarin.Forms中实现页面滑动时固定显示的顶部横幅？

你之前的问题核心在于：CarouselPage是整页切换容器，无法添加全局固定元素；而直接给CarouselView绑定ContentPage列表是错误的——ContentPage是独立页面容器，不适合作为滚动视图的子项。下面是可行的解决方案：

步骤1：重构原有页面为ContentView #

将GameListPage、MainHubPage、PlaceholderPage的内容提取为ContentView（而非完整ContentPage），比如创建三个ContentView文件：

• GameListContentView.xaml：原GameListPage的Content内容
• MainHubContentView.xaml：原MainHubPage的Content内容
• PlaceholderContentView.xaml：原PlaceholderPage的Content内容

示例（GameListContentView.xaml）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Planetarium_V2.GameListContentView">
    <!-- 原GameListPage的Content内容 -->
    <StackLayout>
        <Label Text="游戏列表页面内容" FontSize="Large"/>
        <!-- 其他原有控件 -->
    </StackLayout>
</ContentView>

步骤2：构建主页面布局 #

创建一个主ContentPage，顶部放置固定横幅，下方嵌入CarouselView加载ContentView：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Planetarium_V2"
             x:Class="Planetarium_V2.MainCarouselContainer">
    <StackLayout>
        <!-- 顶部固定横幅 -->
        <Frame BackgroundColor="#1976D2" Padding="15" Margin="0">
            <Label Text="我的固定横幅" TextColor="White" FontSize="Large" HorizontalOptions="Center"/>
        </Frame>

        <!-- 滑动内容区域 -->
        <CarouselView HeightRequest="500">
            <local:GameListContentView/>
            <local:MainHubContentView/>
            <local:PlaceholderContentView/>
        </CarouselView>
    </StackLayout>
</ContentPage>

可选：使用ViewModel动态加载（如果需要） #

如果要动态管理滑动项，可通过ViewModel绑定ContentView列表：

ViewModel代码 #

using System.Collections.Generic;
using Xamarin.Forms;

namespace Planetarium_V2.Classes
{
    public class PopulateViews
    {
        public List<ContentView> Views { get; set; }

        public PopulateViews()
        {
            Views = new List<ContentView>()
            {
                new GameListContentView(),
                new MainHubContentView(),
                new PlaceholderContentView()
            };
        }
    }
}

主页面XAML修改 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Planetarium_V2"
             xmlns:vm="clr-namespace:Planetarium_V2.Classes"
             x:Class="Planetarium_V2.MainCarouselContainer">
    <ContentPage.BindingContext>
        <vm:PopulateViews/>
    </ContentPage.BindingContext>

    <StackLayout>
        <!-- 顶部固定横幅 -->
        <Frame BackgroundColor="#1976D2" Padding="15" Margin="0">
            <Label Text="我的固定横幅" TextColor="White" FontSize="Large" HorizontalOptions="Center"/>
        </Frame>

        <!-- 滑动内容区域 -->
        <CarouselView ItemsSource="{Binding Views}" HeightRequest="500">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <ContentView Content="{Binding}"/>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </StackLayout>
</ContentPage>

关键说明 #

• 不能直接用ContentPage作为CarouselView的项：ContentPage自带导航栏、生命周期管理，作为子视图会导致布局冲突和生命周期异常，ContentView是专门用于复用内容的轻量级容器。
• 顶部横幅通过StackLayout固定在屏幕顶部，CarouselView仅占据下方区域，滑动时不会影响横幅位置。

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