Xamarin collectionview 滚动不流畅
Xamarin collectionview is not scrolling smoothly
我在 Xamarin 中使用集合视图,我不知道滚动不流畅的原因。我在 android 中实现了编译绑定并增加了垃圾收集器的大小。我想要任何关于如何优化集合视图的建议,或者指出问题所在。
<CollectionView x:DataType="viewmodels:PageViewModel" ItemsSource="{Binding ItemList}" >
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Item">
<StackLayout>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="5" Color="Silver"/>
<Grid RowSpacing="0" ColumnSpacing="0" Padding="15,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" Orientation="Horizontal">
<ff:CachedImage Source="Image.jpg" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start">
<ff:CachedImage.Transformations>
<ffTrans:CircleTransformation />
</ff:CachedImage.Transformations>
</ff:CachedImage>
<StackLayout HorizontalOptions="FillAndExpand" Padding="10,0,0,0">
<Label Text="{Binding Name}" FontSize="Small"/>
<Label Text="{Binding Date, StringFormat='{0:dd MMM yyyy}'}" FontSize="Small"/>
</StackLayout>
</StackLayout>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="True" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="img.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" Source="Icon.png" WidthRequest="20" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Text}" Margin="0,10"/>
<mediavideoplayer:VideoPlayer x:Name="mediaelement" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" IsEnabled="{Binding Attachments, Converter={StaticResource VideoVisibilityConverter}}" IsVisible="{Binding Attachments ,Converter={StaticResource VideoVisibilityConverter}}" DisplayControls="False" FillMode="ResizeAspectFill" HeightRequest="350" AutoPlay="True" Repeat="True">
<mediavideoplayer:VideoPlayer.Source>
<MultiBinding Converter="{StaticResource VideoUrlConverter}">
<Binding Path="Attachments.Path" />
<Binding Path="Attachments" />
</MultiBinding>
</mediavideoplayer:VideoPlayer.Source>
</mediavideoplayer:VideoPlayer>
<Image IsVisible="{Binding Attachments, Converter={StaticResource ImageVisibilityConverter}}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Aspect="AspectFill" Style="{StaticResource StCommentPicture}">
<Image.Source>
<MultiBinding Converter="{StaticResource UrlConverter}">
<Binding Path="Attachments.path" />
<Binding Path="Attachments" />
</MultiBinding>
</Image.Source>
</Image>
<StackLayout Grid.Row="3" Grid.Column="0" >
<Label Text="👍" />
<Label Text="😍" />
<Label Text="😂" />
<Label x:Name="LikesCount" Grid.Row="5" Grid.Column="1" Text="{Binding likes}" />
</StackLayout>
<Label Grid.Row="3" Grid.Column="2" HorizontalOptions="End" Text="{Binding Comments, StringFormat='{0} Comments'}" Margin="0,6"/>
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" VerticalOptions="EndAndExpand" HeightRequest="1" Color="LightGray" Margin ="0,5"/>
<Frame Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" x:Name="likeArea" Opacity="0" Padding="0" HasShadow="true" OutlineColor="#EEEEEE" CornerRadius="70">
<Grid x:Name="GridlikeArea" Padding="5,0" BackgroundColor="Transparent" ColumnDefinitions="*,*,*,*,*" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<ImageButton x:Uid="Like" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Source="Like.png" Clicked="LikeFrame_Clicked" ></ImageButton>
<ImageButton x:Name="Laugh" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="1" Aspect="AspectFit" Source="Laugh.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Love" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="2" Aspect="AspectFit" Source="love.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Sad" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="3" Aspect="AspectFit" Source="sad.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Hate" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="4" Aspect="AspectFit" Source="angry.png" Clicked="LikeFrame_Clicked"></ImageButton>
</Grid>
</Frame>
<Button x:Name="LikeButton" HeightRequest="40" BackgroundColor="{Binding Reactions,Converter={StaticResource ReactionColorConverter}}"
CornerRadius="50" Grid.Row="5" Grid.Column="0" ImageSource="{Binding Reactions, Converter={StaticResource ReactionImageConverter}}" Text="Like" Clicked= "LikeButton_Clicked" HorizontalOptions="StartAndExpand"/>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<StackLayout HorizontalOptions="CenterAndExpand" Padding="0">
<Button BackgroundColor="Transparent" HorizontalOptions="CenterAndExpand" TextColor="#529dff" FontAttributes="Bold" Text="Load More..." Command="{Binding LoadMoreCommand}" Clicked="loadmorebutton_Clicked"/>
</StackLayout>
</CollectionView.Footer>
</CollectionView>
**注意:删除 mediavideoplayer:VideoPlayer 控件不会有任何不同 **
问题已由 nuget Glidex 解决。 glidex.forms 是一个小型库,我们可以通过依赖 Glide 来提高 Xamarin.Forms 在 Android 上的图像性能。请参阅我的 post 主题 here。
我在 Xamarin 中使用集合视图,我不知道滚动不流畅的原因。我在 android 中实现了编译绑定并增加了垃圾收集器的大小。我想要任何关于如何优化集合视图的建议,或者指出问题所在。
<CollectionView x:DataType="viewmodels:PageViewModel" ItemsSource="{Binding ItemList}" >
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Item">
<StackLayout>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="5" Color="Silver"/>
<Grid RowSpacing="0" ColumnSpacing="0" Padding="15,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" Orientation="Horizontal">
<ff:CachedImage Source="Image.jpg" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start">
<ff:CachedImage.Transformations>
<ffTrans:CircleTransformation />
</ff:CachedImage.Transformations>
</ff:CachedImage>
<StackLayout HorizontalOptions="FillAndExpand" Padding="10,0,0,0">
<Label Text="{Binding Name}" FontSize="Small"/>
<Label Text="{Binding Date, StringFormat='{0:dd MMM yyyy}'}" FontSize="Small"/>
</StackLayout>
</StackLayout>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="True" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="img.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" Source="Icon.png" WidthRequest="20" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Text}" Margin="0,10"/>
<mediavideoplayer:VideoPlayer x:Name="mediaelement" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" IsEnabled="{Binding Attachments, Converter={StaticResource VideoVisibilityConverter}}" IsVisible="{Binding Attachments ,Converter={StaticResource VideoVisibilityConverter}}" DisplayControls="False" FillMode="ResizeAspectFill" HeightRequest="350" AutoPlay="True" Repeat="True">
<mediavideoplayer:VideoPlayer.Source>
<MultiBinding Converter="{StaticResource VideoUrlConverter}">
<Binding Path="Attachments.Path" />
<Binding Path="Attachments" />
</MultiBinding>
</mediavideoplayer:VideoPlayer.Source>
</mediavideoplayer:VideoPlayer>
<Image IsVisible="{Binding Attachments, Converter={StaticResource ImageVisibilityConverter}}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Aspect="AspectFill" Style="{StaticResource StCommentPicture}">
<Image.Source>
<MultiBinding Converter="{StaticResource UrlConverter}">
<Binding Path="Attachments.path" />
<Binding Path="Attachments" />
</MultiBinding>
</Image.Source>
</Image>
<StackLayout Grid.Row="3" Grid.Column="0" >
<Label Text="👍" />
<Label Text="😍" />
<Label Text="😂" />
<Label x:Name="LikesCount" Grid.Row="5" Grid.Column="1" Text="{Binding likes}" />
</StackLayout>
<Label Grid.Row="3" Grid.Column="2" HorizontalOptions="End" Text="{Binding Comments, StringFormat='{0} Comments'}" Margin="0,6"/>
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" VerticalOptions="EndAndExpand" HeightRequest="1" Color="LightGray" Margin ="0,5"/>
<Frame Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" x:Name="likeArea" Opacity="0" Padding="0" HasShadow="true" OutlineColor="#EEEEEE" CornerRadius="70">
<Grid x:Name="GridlikeArea" Padding="5,0" BackgroundColor="Transparent" ColumnDefinitions="*,*,*,*,*" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<ImageButton x:Uid="Like" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Source="Like.png" Clicked="LikeFrame_Clicked" ></ImageButton>
<ImageButton x:Name="Laugh" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="1" Aspect="AspectFit" Source="Laugh.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Love" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="2" Aspect="AspectFit" Source="love.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Sad" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="3" Aspect="AspectFit" Source="sad.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Hate" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="4" Aspect="AspectFit" Source="angry.png" Clicked="LikeFrame_Clicked"></ImageButton>
</Grid>
</Frame>
<Button x:Name="LikeButton" HeightRequest="40" BackgroundColor="{Binding Reactions,Converter={StaticResource ReactionColorConverter}}"
CornerRadius="50" Grid.Row="5" Grid.Column="0" ImageSource="{Binding Reactions, Converter={StaticResource ReactionImageConverter}}" Text="Like" Clicked= "LikeButton_Clicked" HorizontalOptions="StartAndExpand"/>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<StackLayout HorizontalOptions="CenterAndExpand" Padding="0">
<Button BackgroundColor="Transparent" HorizontalOptions="CenterAndExpand" TextColor="#529dff" FontAttributes="Bold" Text="Load More..." Command="{Binding LoadMoreCommand}" Clicked="loadmorebutton_Clicked"/>
</StackLayout>
</CollectionView.Footer>
</CollectionView>
**注意:删除 mediavideoplayer:VideoPlayer 控件不会有任何不同 **
问题已由 nuget Glidex 解决。 glidex.forms 是一个小型库,我们可以通过依赖 Glide 来提高 Xamarin.Forms 在 Android 上的图像性能。请参阅我的 post 主题 here。