如何访问CarouselView Xamarin.Forms中的对象

时间:2017-07-18 13:24:08

标签: c# xamarin.forms viewflipper

我有一个Xamarin.Forms应用程序,它在CarouselView中显示ViewFlipper(https://github.com/TorbenK/ViewFlipper)。

我希望ViewFlipper在更改旋转木马内的页面时翻回到前面。但我似乎无法弄清楚如何访问ViewFlipper。

我有以下工作代码:

public class CarouselContent
{
    public string FrontImg { get; set; }
    public string BackImg { get; set; }
}

public class MainPage : ContentPage
{
    public MainPage()
    {
        var pages = new ObservableCollection<CarouselContent>();

        var page1 = new CarouselContent();
        page1.FrontImg = "page1Front";
        page1.BackImg = "page1Back";

        var page2 = new CarouselContent();
        page2.FrontImg = "page2Front";
        page2.BackImg = "page2Back";

        pages.Add(page1);
        pages.Add(page2);

        var carouselView = new Carousel(pages);

        Content = carouselView;
    }
}

public class Carousel : AbsoluteLayout
{
    private DotButtonsLayout dotLayout;
    private CarouselView carousel;

    public Carousel(ObservableCollection<CarouselContent> pages)
    {
        carousel = new CarouselView();

        var template = new DataTemplate(() =>
        {
            //create page
            var absLayout = new AbsoluteLayout();

            //create images for the flipper
            var frontImg = new Image
            {
                Aspect = Aspect.AspectFit
            };
            frontImg.SetBinding(Image.SourceProperty, "FrontImg");

            var backImg = new Image
            {
                Aspect = Aspect.AspectFit
            };
            backImg.SetBinding(Image.SourceProperty, "BackImg");

            //create flipper
            var flipper = new ViewFlipper.FormsPlugin.Abstractions.ViewFlipper();
            flipper.FrontView = frontImg;
            flipper.BackView = backImg;              

            //Add flipper to page
            absLayout.Children.Add(flipper);

            return absLayout;
        });

        carousel.ItemsSource = pages;
        carousel.ItemTemplate = template;

        Children.Add(carousel);
    }
}

我尝试将ViewFlipper添加到CarouselContent但我无法使其工作。有什么想法吗?

编辑:

我尝试使用可绑定项创建AbsoluteLayout,并将CarouselContent中创建的项绑定到CarouselView的datatemplate中,但是行&#39;(b as BindableAbsLayout).Children.Add((View)v);&# 39;在BindableAbsLayout永远不会被调用。我究竟做错了什么?

class BindableAbsLayout : AbsoluteLayout
{
    public static readonly BindableProperty ItemsProperty =
        BindableProperty.Create(nameof(Items), typeof(ObservableCollection<View>), typeof(BindableAbsLayout), null,
            propertyChanged: (b, o, n) =>
            {
                (n as ObservableCollection<View>).CollectionChanged += (coll, arg) =>
                {
                    switch (arg.Action)
                    {
                        case NotifyCollectionChangedAction.Add:
                            foreach (var v in arg.NewItems)
                                (b as BindableAbsLayout).Children.Add((View)v);
                            break;
                        case NotifyCollectionChangedAction.Remove:
                            foreach (var v in arg.NewItems)
                                (b as BindableAbsLayout).Children.Remove((View)v);
                            break;
                    }
                };
            });

    public ObservableCollection<View> Items
    {
        get { return (ObservableCollection<View>)GetValue(ItemsProperty); }
        set { SetValue(ItemsProperty, value); }
    }
}


public class CarouselContent
{
    private ViewFlipper.FormsPlugin.Abstractions.ViewFlipper _flipper;
    private ObservableCollection<View> _items;

    public ObservableCollection<View> Items
    {
        get { return _items; }
    }

    public CarouselContent(string frontImgStr, string backImgStr)
    {
        _items = new ObservableCollection<View>();

        _flipper = new ViewFlipper.FormsPlugin.Abstractions.ViewFlipper();

        var frontImg = new Image
        {
            Aspect = Aspect.AspectFit
        };
        frontImg.Source = frontImgStr;

        var backImg = new Image
        {
            Aspect = Aspect.AspectFit
        };
        backImg.Source = backImgStr;

        _flipper.FrontView = frontImg;
        _flipper.BackView = backImg;

        AbsoluteLayout.SetLayoutBounds(_flipper, new Rectangle(0.5, 0.05, 0.85, 0.85));
        AbsoluteLayout.SetLayoutFlags(_flipper, AbsoluteLayoutFlags.All);

        Items.Add(_flipper);
    }
}


public class Carousel : AbsoluteLayout
{
    private DotButtonsLayout dotLayout;
    private CarouselView carousel;

    public Carousel(ObservableCollection<CarouselContent> pages)
    {
        carousel = new CarouselView();

            var template = new DataTemplate(() =>
            {
                var absLayout = new BindableAbsLayout();
                absLayout.BackgroundColor = Color.FromHex("#68BDE4");
                absLayout.SetBinding(BindableAbsLayout.ItemsProperty,"Items");
                return absLayout;
            });

        carousel.ItemsSource = pages;
        carousel.ItemTemplate = template;

        Children.Add(carousel);
    }
}

1 个答案:

答案 0 :(得分:0)

不确定这里的最佳做法是什么,但您可以尝试通过ItemSelected事件(每次在carouselview中来回切换时触发)来访问它

连线

carousel.ItemSelected += carouselOnItemSelected;

获取ViewFlipper

private void carouselOnItemSelected(object sender, SelectedItemChangedEventArgs selectedItemChangedEventArgs)
        {
            CarouselContent carouselContent = selectedItemChangedEventArgs.SelectedItem;
            ViewFlipper viewFlipper = carouselContent.Children[0];
            viewFlipper.FlipState = ViewFlipper.FrontView;
        }