Question

我有一个实现同步融合的Carousel和使用ItemTemplate绑定项目的工具。当我将项目加载到Carousel时，所有项目都出现在Carousel视图中。但是我需要为其添加一个点状指示器。当用户在圆盘传送带上用点擦动时，应指示当前位置。从syncfusion rotator的文档中读取时，具有此功能。我需要将其添加到轮播视图中。

Answer 1

在这里您可以找到所有的SfCarousel Class Members。

在SfCarousel打印中引用的点没有属性。

实际上，我认为您将其与另一个名为SfRotator的组件混淆了。（与您的印刷品有相同的示例）。并且您要查找的属性称为： DotPlacement 。

并且可以具有以下状态：

没有//No Dots
默认//Dots Inside the Rotator View
外部//Dots Outside the Rotator View

Answer 2

我们已经分析了您的查询，目前在CarouselView中不支持点视图。但是，我们可以使用Border或Button控件来满足此要求，如下面的代码片段所示。

自定义DotsView：

XAML：

    <border:SfBorder BorderColor="{Binding ThumbBorder}" HorizontalOptions="Center" VerticalOptions="Center" BorderWidth="5" CornerRadius="50"  />

轮播视图：

XAML：

<carousel:SfCarousel x:Name="carousel"  Grid.Row="0" Offset="0" ItemsSource="{Binding ImageCollection}" ItemTemplate="{StaticResource itemTemplate}" 
                       ItemHeight="200" SelectionChanged="Carousel_SelectionChanged"
                                       ItemWidth="200" />
        <StackLayout Grid.Row="1" HorizontalOptions="Center" x:Name="rotatorThumb" BackgroundColor="Transparent" Orientation="Horizontal"/>

C＃：

  public MainPage()
    {
        InitializeComponent();

        Command command = new Command((object thumb) =>
        {
            var thumbView = thumb as DotsView;
            if (thumbView != null)
            {
                ((rotatorThumb.Children[carousel.SelectedIndex] as DotsView).BindingContext as CarouselModel).
                    ThumbBorder = Color.LightGray;
                carousel.SelectedIndex = thumbView.Index;
                (thumbView.BindingContext as CarouselModel).ThumbBorder = Color.Red;
            }
        });

        for (var i = 0; i < ImageCollection.Count; i++)
        {
            var itemView = new DotsView() { BindingContext = ImageCollection[i], Index = i };
            if (carousel.SelectedIndex == i)
                (itemView.BindingContext as CarouselModel).ThumbBorder = Color.Red;
            TapGestureRecognizer thumbTap = new TapGestureRecognizer();
            thumbTap.Command = command;
            itemView.GestureRecognizers.Add(thumbTap);
            thumbTap.CommandParameter = itemView;
            rotatorThumb.Children.Add(itemView);
        }

   }

输出：

Sample

带有点的xamarin Syncfusion旋转木马

2 个答案: