水平ListView Xamarin.Forms
有没有办法在Xamarin.Forms
创建带有horizontal scroll
ListView
,如image
这就是我为垂直所做的
var myListView = new ListView { ItemTemplate = new DataTemplate(typeof(ImageCell)) };
是的,你在技术上可以。 将“旋转”设置为270(所有VisualElements都具有“旋转BindableProperty”)。 然而,这看起来像一个次优解决方案,因为顶部和底部都有白色空间,您必须左右拖动视图才能完全看到所有内容。
public static readonly BindableProperty RotationProperty; public static readonly BindableProperty RotationXProperty; public static readonly BindableProperty RotationYProperty;
上面的代码来自VisualElement类。 下面的代码是我自己的一小部分样本。
∨∨∨
正如其他人所说的那样,没有 – 在Xamarin.Forms中没有一个可用的开箱即用 。
但是 – 它并没有阻止任何人编写自己的自定义渲染器来实现这种类型的控制。
正如Stephane Delcroix所提到的,您可以创建一个ScrollView ,然后创建一个StackLayout作为子项来创建相同的效果。
然后,您需要实施: –
*) bindable属性接受需要创建的( IEnumerable ) ItemsSource属性。
*) bindable属性接受需要创建的( DataTemplate ) ItemTemplate属性。
*) 绑定代码以实例化ItemTemplate的实例,获取特定的数据源项并将其呈现到StackLayout中 。 您还必须考虑删除的项目等。
*)附加事件处理程序/点击手势以进行项目选择。
*)实现选定状态/停用其他所选项目。
……等等,以获得完整的实施。
所有上述问题都存在于相对较小的项目列表中。
但是,如果您要查找很长的条目列表,那么在上面创建所有视图时 ,上面会有点不受欢迎。
即使你延迟加载这些,你仍然需要考虑所有视图的内存占用 。
然后,这导致另一个可能的实现,处理虚拟化项目 ,这是一个完整的不同的故事要考虑。
如上所述,没有标准的方法可以做到这一点,但是有一种方法可以使用标准的ListView
和@MillieSmiths方法。
该解决方案需要多层嵌套布局。 从ListViewwe开始将旋转270度,但是也会旋转我们的项目内容,因此我们需要将其旋转90度。
旋转ListView创建了大量的空白,通过将ListView包装在绝对布局中我们可以解决这个问题(我们需要额外的内容视图来解决一些剪切问题)。
最后在代码隐藏中我们需要渲染布局剪辑
看到完整的解决方案:
对于背后的代码,我们只需要检查我们之前是否已经设置好了,如果有的话,就放手吧。 基本上我们找出页面的宽度是什么( NameGrid
只是其他地方的全NameGrid
器)然后将直接ListView容器向上移动一半的空白,并将其剪切到底部的另一半)
bool hasAppearedOnce = false; protected override void OnAppearing() { base.OnAppearing(); if (!hasAppearedOnce) { hasAppearedOnce = true; var padding = (NameGrid.Width - MessagesListView.Height) / 2; MessagesListView.HeightRequest = MessagesLayoutFrame.Width; MessagesLayoutFrameInner.WidthRequest = MessagesLayoutFrame.Width; MessagesLayoutFrameInner.Padding = new Thickness(0); MessagesLayoutFrame.Padding = new Thickness(0); MessagesLayoutFrame.IsClippedToBounds = true; Xamarin.Forms.AbsoluteLayout.SetLayoutBounds(MessagesLayoutFrameInner, new Rectangle(0, 0 - padding, AbsoluteLayout.AutoSize, MessagesListView.Height - padding)); MessagesLayoutFrameInner.IsClippedToBounds = true; // */ } }
警告请勿使用
进行布局移动和旋转。 它将在Windows Phone上崩溃。
PS我相信这可以包含在一个很好的UserControl中供大家使用。
就像其他人所说的那样,ListView不可能,我认为Xamarin对Forms有很大的疏忽。 我们需要动态显示数据驱动对象,而不仅仅是列表中的内容….来吧你好!
但是,在Xamarin Labs项目中,您可以使用GridView。 它仍然有点粗糙,人们正在通过选择项目来解决一些错误。
https://github.com/XForms/Xamarin-Forms-Labs
有人似乎有解决这个问题的方法:
从Xamarin Forms 2.3开始, CarouselView
就是这么做的。 在这里阅读更多。
不,没有办法让水平的ListView
。 您可以将水平StackLayout包装在水平ScrollView中以获得相同的视觉效果,但这并不完全相同,因为您没有DataTemplating。
我尝试了上面提到的“旋转”解决方案,除了它是一个“丑陋”的解决方案,它还有几个限制 :
- 列表视图WidthRequest必须与HeightRequest相同
- listView行高度不再正常工作,因为它变为单元格宽度
- verticalalign变成了horizontalalign等,不是很容易维护。
更好的选择是制作自己的自定义控件,或者像我一样, 使用现有的HorizontalListView : https : //www.nuget.org/packages/HorizontalListView1.1/这个很容易使用。 您可以在此处找到源代码和文档
执行:
这款nuget套装非常适合您的情况。 我以前用过这个,我真的很喜欢它:
https://github.com/SuavePirate/DynamicStackLayout
为了更好地下载这3个Nuget软件包,可以对照片进行图像加载,缓存和转换。 照片将被塑造成一个圆圈,但这个nuget有其他类型的变换:
Xamarin.FFImageLoading (https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API) Xamarin.FFImageLoading.Forms Xamarin.FFImageLoading.Transformations (https://github.com/luberda-molinet/FFImageLoading/wiki/Transformations-Guide)
这是一段代码可以帮助您开始:
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations" xmlns:dynamicStackLayout="clr-namespace:SuaveControls.DynamicStackLayout;assembly=SuaveControls.DynamicStackLayout"
我希望它有帮助:)
据我所知,有三种方法可以实现这一点:
- 轮换( 如其他人所说 )
- 无需再做那个标准的ListView
- ItemTemplate可用
- 难看的解决方案!
- 自定义渲染( Android中的RecyclerView和(我认为)iOS中的UICollectionView )
- 自定义单元格可用(我确定Android,但不确定iOS)
- 需要更多的工作和代码
- 网格和水平ScrollView( 在ScrollView中使用水平值作为方向支柱 )
- 自定义布局可用
- 此解决方案中没有可用的CachingStrategy,因此对于大量列表,这可能会导致应用程序的RAM使用量过大
直到CollectionView出来,你可以使用我的Xamarin.Forms HorizontalListView 。
它有:
- 捕捉第一个或中间元素
- 填充和项目间距
- 处理NotifyCollectionChangedAction添加,删除和重置操作
- 查看回收
- Android上的RecyclerView
- iOS上的UICollectionView
- 事实上,这种实现在哲学和实现方面与将来提供未来的Xamarin CollectionView非常接近。
这已经通过名为ItemsView的自定义类(不要与XViewrin的ItemsView在ListView中进行数据模板混淆)来解决,该类实现了上面提到的ScrollView / StackPanel模式,该模式已经被请求了。 请参阅代码: https : //gist.github.com/fonix232/b88412a976f67315f915