本篇文章講如何實現 app 引導頁。一個好的引導頁可以幫助用戶快速了解整個 app 的功能。

此次用到的控件是 CarouselView ，官方文檔對 CarouselView 的解釋如下：

CarouselView是一種用于在可滾動的布局中呈現數據的視圖，用戶可在此視圖中通過一系列項進行切換。 默認情況下，CarouselView 會以水平方向顯示其項。 屏幕上將顯示一項，其中包含滑動手勢，導致在項集合中向前和向后導航。
CarouselView 在 Xamarin. Forms 4.3 中提供。

接下來，上代碼

• Layout 布局代碼 TutorialPage.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"
             x:Class="TutorialApp.Views.TutorialPage">
    <AbsoluteLayout>
        <CarouselView x:Name="carouseView" IndicatorView="indicatorView" CurrentItemChanged="OnCurrentChange"
                      AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
            <CarouselView.ItemsSource>
                <x:Array Type="{x:Type Image}">
                    <Image Source="guide_image1"/>
                    <Image Source="guide_image2"/>
                    <Image Source="guide_image3"/>
                    <Image Source="guide_image4"/>
                </x:Array>
            </CarouselView.ItemsSource>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Source}" Aspect="AspectFill"/>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <Image x:Name="arrowLeft" Source="arrow_left" Aspect="AspectFill"
               AbsoluteLayout.LayoutFlags="PositionProportional"
               AbsoluteLayout.LayoutBounds="0, .3, 30, 40"/>
        <Image x:Name="arrowRight" Source="arrow_right" Aspect="AspectFill"
               AbsoluteLayout.LayoutFlags="PositionProportional"
               AbsoluteLayout.LayoutBounds="1, .3, 30, 40"/>
        <IndicatorView 
            x:Name="indicatorView"
            IndicatorColor="LightGray"
            SelectedIndicatorColor="Accent"
            HorizontalOptions="Center"
            IndicatorSize="10"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            AbsoluteLayout.LayoutBounds=".5, .75, 100, 30"/>
        <Button Text="Skip" BackgroundColor="LightGray" FontSize="15" CornerRadius="5"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds=".96, .02, 60, 40"
                Clicked="GoHomePage"/>
        <Button x:Name="button" Text="Go Home" TextColor="White" FontSize="18"
                BackgroundColor="Transparent" BorderColor="White" 
                BorderWidth="2" CornerRadius="5" Padding="20, 0"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds=".5, .82, 150, 40"
                Clicked="GoHomePage"/>
    </AbsoluteLayout>
</ContentPage>

• TutorialPage.xaml.cs 代碼如下：

namespace TutorialApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TutorialPage : ContentPage
    {
        public TutorialPage()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
        }
        async void GoHomePage(object sender, EventArgs args)
        {
            await Navigation.PushAsync(new HomePage());
        }
        private void OnCurrentChange(object sender, EventArgs args)
        {
            arrowLeft.IsVisible = carouseView.Position != 0;
            arrowRight.IsVisible = carouseView.Position != 3;
            button.IsVisible = carouseView.Position == 3;
        }
    }
}

最終的實現效果如下：

untitled.gif

gif圖用模擬器錄的，看起來有些卡。如果有疑問的地方可以發私信一起交流。

以上。