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

尽量保持简单，我所做的是：

<强> MyCarouselPage ：

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

轮播页面指示器

2 个答案: