轮播页面指示器

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

通过更改下面的 CarouselChild 方法，我能够通过硬编码页面指示器来解决该问题：

public CarouselChild(string image, string text, int pageNumber, int pageCount)
    {
        var width = this.Width;
        StackLayout layout = new StackLayout
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
            Padding = new Thickness( 40, 40, 40, 40),
            BackgroundColor = Color.Black,
        };
        layout.Children.Add(new Image
        {
            Source = image,
            VerticalOptions = LayoutOptions.Start,
            HorizontalOptions = LayoutOptions.Center,
        });
        layout.Children.Add(new Label
        {
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            Text = text,
            FontSize = 36,
            LineBreakMode = LineBreakMode.WordWrap,
        });
        layout.Children.Add(CarouselPageIndicator(pageNumber, pageCount));

        this.Content = layout;
    }

    internal StackLayout CarouselPageIndicator(int pageNumber, int pageCount)
    {
        StackLayout layout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            VerticalOptions = LayoutOptions.EndAndExpand,
        };

        if (pageCount >= pageNumber)
        {
            for (int i = 1; i < pageCount + 1; i++)
            {
                if (i == pageNumber)
                {
                    layout.Children.Add(new Image
                    {
                        Source = "Light.png",
                    });
                }
                else
                {
                    layout.Children.Add(new Image
                    {
                        Source = "Dark.png",
                    });
                }
            }
        }

        return layout;
    }

Answer 2

为了简单起见，我所做的是：

我的轮播页面：

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;
    }
}

页面的 Base 类

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 页

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

        this.FinalStack = layout;

        this.Content = FinalStack;
    }
}