集合视图中重点项目上的阴影图片

问题描述

下午好。我想问点建议，如何实现我的想法。我有一个带照片的收藏夹视图。这是一个简单的收藏夹视图

 <CollectionView  x:Name="AddCar" ItemsSource="{Binding Types}"      BackgroundColor="Transparent"
                  SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Horizontal"
                />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid >
                                <Grid.RowDeFinitions>
                                    <RowDeFinition Height="120" />
                                </Grid.RowDeFinitions>
                                    <Frame CornerRadius="0"  Margin="5,5,5" Padding="0" >
                                    <Image Source="{Binding Source}"
                          HorizontalOptions="Center" 
                         BackgroundColor="{Binding CustButtonColor}"/>
                                </Frame>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

我想像这样

但是我不知道如何使重点突出的项目以及如何使未重点突出的项目被着色。请帮助

解决方法

您可以尝试使用 Xamarin.Forms CarouselView ，它可以轻松地进行布局。并且中心项将是当前关注的项，不需要选择一个项作为 CollectionView 中的当前选定项。

例如如下的Xaml代码：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodels="clr-namespace:CarouselViewDemos.ViewModels"
             x:Class="CarouselViewDemos.Views.VisualStatesPage"
             Title="CarouselView visual states">
    <ContentPage.BindingContext>
        <viewmodels:MonkeysViewModel />
    </ContentPage.BindingContext>

    <CarouselView ItemsSource="{Binding Monkeys}"
                  CurrentItemChanged="CarouselView_CurrentItemChanged"
                  PeekAreaInsets="120">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="CurrentItem">
                                <VisualState.Setters>
                                    <Setter Property="Scale"
                                            Value="1.1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PreviousItem">
                                <VisualState.Setters>
                                    <Setter Property="Opacity"
                                            Value="0.5" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="NextItem">
                                <VisualState.Setters>
                                    <Setter Property="Opacity"
                                            Value="0.5" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="DefaultItem">
                                <VisualState.Setters>
                                    <Setter Property="Opacity"
                                            Value="0.25" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Frame HasShadow="True"
                           BorderColor="DarkGray"
                           CornerRadius="5"
                           Margin="0"
                           Padding="5"
                           HeightRequest="150"
                           WidthRequest="150"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand">
                        <StackLayout>
                            <!--<Label Text="{Binding Name}" 
                                   FontAttributes="Bold"
                                   FontSize="Large"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center" />-->
                            <Image Source="{Binding ImageUrl}" 
                                   Aspect="AspectFill"
                                   HeightRequest="150"
                                   WidthRequest="150"
                                   HorizontalOptions="Center" />
                            <!--<Label Text="{Binding Location}"
                                   HorizontalOptions="Center" />
                            <Label Text="{Binding Details}"
                                   FontAttributes="Italic"
                                   HorizontalOptions="Center"
                                   MaxLines="5"
                                   LineBreakMode="TailTruncation" />-->
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

</ContentPage>

在 ContentPage.cs 中，还可以知道当前项是哪个：

private void CarouselView_CurrentItemChanged(object sender,CurrentItemChangedEventArgs e)
{
    Monkey previousItem = e.PreviousItem as Monkey;
    Monkey currentItem = e.CurrentItem as Monkey;
}

然后效果如下：

基于this official sample projet的示例代码。