Question

我们是否可以创建Carousel View而不是Carousel页面，以便只有部分页面向左或向右滑动。另外，我想在Xamarin Forms中创建此控件，而不是特定于平台。

如果我们需要在xamarin.android或xamarin.iOS中创建这个自定义控件，那么使用Xamarin.forms的真正好处是什么，这些简单的要求无法满足。

Answer 1

在github上有一个记录良好的CarouselView项目：

https://github.com/chrisriesgo/xamarin-forms-carouselview 和 http://chrisriesgo.com/xamarin-forms-carousel-view-recipe/

Answer 2

现在可以使用CarouselView的nuget包（v2.3.0-pre1）： https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

Answer 3

我们可以使用Xamarin表格4.3中引入的CarouselView。现在，在Xamarin 4.6中，我们不必在iOS的appdelegate和android的mainactivity中使用Forms.SetFlags("CollectionView_Experimental");。

但是，要在“轮播”页面上使用 indicatorview ，我们必须对此进行设置 Forms.SetFlags（“ IndicatorView_Experimental”）;在iOS的appdelegate和android的mainactivity中。

Answer 4

我刚刚实施了类似的事情。为了创建轮播视图，我刚创建了一个水平Stacklayout，包裹在水平滚动视图中。

在我的特定示例中，我需要创建一个图库。我使用了Xamarin.Labs项目中的Camera控件来从相机胶卷或相机本身获取图像。然后我把它作为一个孩子添加到Stacklayout。

希望这有帮助。

Answer 5

从Xamarin.Forms V2.2.0-pre1 CarouselView开始，现已添加到Xamarin.Forms。

<强>轮播视图

CarouselView旨在完全取代CarouselPage。 CarouselPage   将在以后的版本中弃用。 CarouselView是优越的   许多方式，包括其虚拟化和嵌套的能力   布局。

请参阅https://forums.xamarin.com/discussion/63983/xamarin-forms-2-2-0-pre1-released#latest

不幸的是，到目前为止还没有关于此的文档。

修改

CarouselView已移除Xamarin.Forms V2.2.0.31，因为它尚未准备好进行稳定发布。但从它的外观来看，它很快就会被合并。

现在，您可以在此处找到单独的CarouselView nuget包：https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

你可以像这样使用它：

命名空间：

xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"

然后我们可以在页面顶部添加CarouselView：

<Grid RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height=".3*"/> <RowDefinition Height=".7*"/> </Grid.RowDefinitions> <cv:CarouselView ItemsSource="{Binding Zoos}" x:Name="CarouselZoos"> <cv:CarouselView.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/> <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12"> <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/> </StackLayout> </Grid> </DataTemplate> </cv:CarouselView.ItemTemplate> </cv:CarouselView>  </Grid>

更多信息：https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

Answer 6

如果你使用Xamarin.Forms V2.2.0-pre1并且你需要为每个页面显示不同的视图，你可以使用这样的派生类：

public class CarouselViewMultiPage : CarouselView
{
    List<View> _children = new List<View> { };
    public List<View> Children {
        get { return _children; }
        set {
            _children = value;
            OnPropertyChanged();
        }
    }
    public CarouselViewMultiPage ()
    {
        this.ItemTemplate = new CarouselTemplateSelector();
        this.ItemsSource = Children;
        this.SetBinding(CarouselView.ItemsSourceProperty, "Children");
        BindingContext = this;
    }
}
public class CarouselTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        DataTemplate dt = new DataTemplate();
        View civ = (View)item;
        return new DataTemplate(() =>
        {
            return civ;
        });
    }
}

所以你可以通过视图调用它：

public App()
{
    // The root page of your application
    MainPage = new ContentPage {
        Content = new CarouselViewMultiPage
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
            Children =
                       {
                            new Label() { Text="Page 1"},
                            new Label() { Text="Page 2"},
                            new Label() { Text="Page 3"},
                        }
        }
    };
}

Answer 7

CarouselView已在Xamarin表格v4.4中引入。您可以查看this。除了CarouselView外，还添加了IndicatorView来指示轮播中的第n个项目。

如何在Xamarin.forms中查看轮播视图

7 个答案: