Question

请帮助CarouselView。 Xaml：

<carousel:CarouselViewControl.ItemTemplate>
   <DataTemplate>
      <Grid>
         <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <Image Source="{Binding ImSource}" Aspect="AspectFill" Grid.Row="0" Grid.RowSpan="3" HeightRequest="220"/>
         <Button 
            Grid.Row="0"
            Text="1/1"
            CornerRadius ="40"
            FontSize="10"
            HorizontalOptions="End"
            BackgroundColor="Black"
            TextColor="White"
            WidthRequest="40"
            HeightRequest="20"
            Margin="0, 10, 10, 0"
            Opacity="0.7"
            Padding="0"/>
         <controls:CircleImage 
            Grid.Row="2"
            Source="users.png"
            HorizontalOptions="Start"
            WidthRequest="22"
            Opacity="0.7"
            Margin="10, 0, 0, 10"/>
      </Grid>
   </DataTemplate>
</carousel:CarouselViewControl.ItemTemplate>
</carousel:CarouselViewControl>

在“按钮”上，我需要显示“轮播”中的当前位置。但是，如果在列表中有一张图片-需要隐藏此按钮。按钮文字必须类似-2（位置）/ 3（list.Count）

我用过：https://github.com/alexrainman/CarouselView

请告诉我-我该怎么做。

Answer 1

carouselView已经附带了您想要的实现：

您只需要将ShowIndicators属性添加到您的xaml声明中即可：

<controls:CarouselViewControl ShowIndicators="True" ... />

还有一些用于指定指示器形状和颜色的属性：

IndicatorsTintColor：页面点指示器填充颜色（默认为＃C0C0C0）。

CurrentPageIndicatorTintColor：选定的页面点指示器填充颜色（默认值为＃808080）。

IndicatorsShape：指示器形状（默认为圆形）。

Answer 2

尝试将轮播的位置属性绑定到ViewModel，然后将ViewModel的文本绑定到按钮。因此，对于CarouselViewControl，像这样：

<carousel:CarouselViewControl x:Name="CarouselView"
                              Position="{Binding CarouselPosition}"
                              ItemsSource="{Binding CarouselViewItems}">
    ...
</carousel:CarouselViewControl>

您的按钮：

<Button 
     Grid.Row="0"
     Text="{Binding CarouselPositionDisplayCounter}" .../>

在ViewModel中，添加如下所示的属性。

轮播的当前位置：

private int _carouselPosition;

public int CarouselPosition
{
    get { return _carouselPosition; }
    set
    {
        _carouselPosition = value;
        OnPropertyChanged();
    }
}

文本绑定到按钮：

public string CarouselPositionDisplayCounter => 
    $"{(CarouselPosition + 1).ToString()}/{CarouselViewItems.Count.ToString()}";

刷卡时命令：

public ICommand CarouselSwipedCommand => new Command(() =>
{
     OnPropertyChanged(nameof(CarouselPositionDisplayCounter));    
});

Xamarin-如何在CarouselView控件中显示当前位置？

2 个答案: