如何解决集合视图中重点项目上的阴影图片
下午好。我想问点建议,如何实现我的想法。我有一个带照片的收藏夹视图。这是一个简单的收藏夹视图
<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的示例代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。