c# - 轮播页面指示器

Question

我有一个使用 Visual Studio 2013 的 Xamarin.Forms (1.4.2.6359) 项目，并在下面创建了轮播页面。我想添加页面指示器，即轮播页面顶部的点。这可以通过 Xamarin Forms CarouselPage 完成吗？

public class SplashPage : CarouselPage
{
    public SplashPage ()
    {
        this.Children.Add(new CarouselChild("Logo.png", "Welcome"));
        this.Children.Add(new CarouselChild("Settings.png", "Settings"));
    }

}

class CarouselChild : ContentPage
{

    public CarouselChild(string image, string text)
    {
        StackLayout layout = new StackLayout
        {
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            VerticalOptions = LayoutOptions.CenterAndExpand,
        };
        layout.Children.Add(new Image
        {
            Source = image,
        });
        layout.Children.Add(new Label
        {
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            VerticalOptions = LayoutOptions.EndAndExpand,
            Text = text,
            Scale = 2,
        });

        this.Content = layout;
    }
}

Answer 1

为了让事情变得简单，我所做的是:

我的轮播页面:

class MyCarouselPage : CarouselPage
{
    private int totalPages;
    private int currentPage;

    public MyCarouselPage()
    {
        var pages = GetPages();

        totalPages = pages.Length;

        this.ChildAdded += MyCarouselPage_ChildAdded;

        for (int i = 0; i < totalPages; i++)
        {
            currentPage = i;
            this.Children.Add(pages[i]);
        }
    }

    void MyCarouselPage_ChildAdded(object sender, ElementEventArgs e)
    {
        var contentPage = e.Element as MyPageBase;

        if (contentPage != null)
        {
            contentPage.FinalStack.Children.Add(new CarouselPageIndicator(currentPage, totalPages, "indicator.png", "indicator_emtpy.png"));
        }
    }

    private MyPageBase[] GetPages()
    {
        var pages = new MyPageBase[] { new Page1(), new Page2() };
        return pages;
    }
}

页面的基类

class MyPageBase:ContentPage
{
    public StackLayout FinalStack { get; set; }
} 

CarouselPageIndicator

public class CarouselPageIndicator : StackLayout
{
    public CarouselPageIndicator(int currentIndex, int totalItems, string sourceIndicator, string souceEmptyIndicator)
    {
        this.Orientation = StackOrientation.Horizontal;
        this.HorizontalOptions = LayoutOptions.CenterAndExpand;

        for (int i = 0; i < totalItems; i++)
        {
            var image = new Image();

            if (i == currentIndex)
                image.Source = sourceIndicator;
            else
                image.Source = souceEmptyIndicator;

            this.Children.Add(image);
        }

        this.Padding = new Thickness(10);
    }
}

对于n-Pages

class Page1:MyPageBase
{
    public Page1()
    {
        var layout = new StackLayout
        {
            Children = {
                new Label{Text="Page 1"}
            }
        };

        this.FinalStack = layout;

        this.Content = FinalStack;
    }
}