Question

我有一个Xamarin.Forms垂直CarouselView，其中PeakAreaInsets设置得很高，所以我可以一次看到列表中的多个项目。我希望有一种方法可以直观地显示列表中当前“聚焦”或选中的项目。有没有一种方法可以在轮播视图中滚动时动态更改项目的不透明度，以显示当前被选中的项目？

如果有帮助，这是我的代码段：

<CarouselView ItemsSource="{Binding Days}"
                  CurrentItem="{Binding SelectedDay}"
                  VerticalOptions="Center"
                  HorizontalOptions="Center"
                  PeekAreaInsets="300"
                  x:Name="DayCarousel">
        <CarouselView.ItemsLayout>
            <LinearItemsLayout SnapPointsAlignment="Center"
                               SnapPointsType="Mandatory"
                               Orientation="Vertical"/>
        </CarouselView.ItemsLayout>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout Spacing="0"
                             Orientation="Vertical"
                             HorizontalOptions="Center"
                             VerticalOptions="Center"
                             Margin="30,10">
                    <Label Text="{Binding FormattedDate}"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           Style="{StaticResource LabelStyle}"/>
                    <Label Text="{Binding TitleText}"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           Style="{StaticResource LabelHeader1Style}"/>
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BindingContext.SelectDay, Source={x:Reference this}}"
                                              CommandParameter="{Binding .}"/>
                    </StackLayout.GestureRecognizers>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

以下是我正在寻找的内容的说明：

Answer 1

感谢@MouseOnMars

这是完成这项工作的xaml。

        <CarouselView ItemsSource="{Binding Days}"
                  CurrentItem="{Binding SelectedDay}"
                  VerticalOptions="Center"
                  HorizontalOptions="Center"
                  PeekAreaInsets="300"
                  x:Name="DayCarousel">
        <CarouselView.ItemsLayout>
            <LinearItemsLayout SnapPointsAlignment="Center"
                               SnapPointsType="Mandatory"
                               Orientation="Vertical"/>
        </CarouselView.ItemsLayout>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout Spacing="0"
                             Orientation="Vertical"
                             HorizontalOptions="Center"
                             VerticalOptions="Center"
                             Margin="30,10"
                             Opacity=".25">
                    <StackLayout.Triggers>
                        <DataTrigger TargetType="StackLayout"
                                     Binding="{Binding IsSelected}"
                                     Value="True">
                            <Setter Property="Opacity"
                                    Value="1"/>
                        </DataTrigger>
                    </StackLayout.Triggers>
                    <Label Text="{Binding FormattedDate}"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           Style="{StaticResource LabelStyle}"/>
                    <Label Text="{Binding TitleText}"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           Style="{StaticResource LabelHeader1Style}"/>
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BindingContext.SelectDay, Source={x:Reference this}}"
                                              CommandParameter="{Binding .}"/>
                    </StackLayout.GestureRecognizers>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

我必须向ItemTemplate绑定到的模型添加一个新的bool属性“ IsSelected”。然后，我必须在页面ViewModel的“ SelectedDay”属性中添加一些逻辑，以打开和关闭IsSelected布尔值。另外，由于我将CarouselView直接绑定到模型，因此无论何时打开或关闭IsSelected，都必须在其模型上引发属性Changed。

Xamarin.Forms CarouselView：降低未选中项目的不透明度

1 个答案: