【问题标题】:How to implement Carousel View in Xamarin.forms如何在 Xamarin.forms 中实现轮播视图
【发布时间】:2015-11-22 21:17:57
【问题描述】:

有什么方法可以创建轮播视图而不是轮播页面,以便只有部分页面向左或向右滑动。我还想在 Xamarin 表单中创建此控件,而不是特定于平台。

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

【问题讨论】:

  • 不清楚你想知道什么。你想要水平幻灯片之类的东西吗?你想要一个带有 3D 动画的旋转木马吗?您是否只想知道 Xamarin.Forms 是否符合您的需求? stackoverflow.com/questions/32204807/…

标签: xamarin carousel xamarin.forms


【解决方案1】:

【讨论】:

  • 在 VS 2015 附带的 Xamarin 版本中,这是否适用于 Windows phone、UWP 和 Windows 项目类型?
【解决方案2】:

CarouselView 的 nuget 包现已推出 (v2.3.0-pre1): https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

【讨论】:

    【解决方案3】:

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

    但是,要为轮播页面使用 indicatorview,我们必须设置此项 Forms.SetFlags("IndicatorView_Experimental");在 iOS 的 appdelegate 和 android 的 mainactivity 中。

    【讨论】:

      【解决方案4】:

      我刚刚实现了一个类似的东西。为了创建轮播视图,我刚刚创建了一个水平 Stacklayout,包裹在一个水平滚动视图中。

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

      希望这会有所帮助。

      【讨论】:

        【解决方案5】:

        截至Xamarin.Forms V2.2.0-pre1 CarouselView 现已添加到 Xamarin.Forms。

        轮播视图

        CarouselView 旨在完全取代 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>
          <!--List of Monkeys below-->
        </Grid>
        

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

        【讨论】:

        • 看起来 CarouselView 不再存在。发生了什么?
        • CarouselView 已为 V2.2.0.31 删除,因为它尚未准备好发布。但从外观上看,它将被合并回下一个稳定版本
        • 是不是表示使用这个包不安全?
        • @batmaci Pre-Release 表示使用该软件包,但请注意它可能包含错误并且不适合需要发布的应用程序
        • @user1 你知道如何使用 mvvm 实现 PostionSelected 事件吗?
        【解决方案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"},
                                }
                }
            };
        }
        

        【讨论】:

          【解决方案7】:

          CarouselView 已在 Xamarin 表单 v4.4 中引入。你可以看看this。除了CarouselView,还添加了IndicatorView,表示轮播中的第n个项目。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多