Xamarin.Forms CarouselView: меньшая непрозрачность невыбранных элементов - PullRequest
Новая
       66

Xamarin.Forms CarouselView: меньшая непрозрачность невыбранных элементов

0 голосов
/ 30 января 2020

У меня есть вертикальный CarouselView Xamarin.Forms, где 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>

Вот иллюстрация того, что я ищу:

enter image description here

1 Ответ

2 голосов
/ 31 января 2020

Благодаря @ 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>

Мне пришлось добавить новое свойство bool "IsSelected" в модель, к которой привязан ItemTemplate. к. Затем мне пришлось добавить несколько логик c в моем свойстве «SelectedDay» на моей Page ViewModel, чтобы включать и выключать IsSelected bool. Кроме того, поскольку я привязываю CarouselView непосредственно к модели, мне пришлось повышать свойство Changed для модели IsSelected при каждом ее включении или выключении.

...