我想使用listview将用户控件水平显示为项目。那么我们是否可以横向显示列表视图。
答案 0 :(得分:1)
您可以通过自定义控件实现水平列表视图。 请参阅此代码,
1)为已渲染的Listview扩展Scrollview属性
using System;
using System.Collections;
using System.Collections.Generic;
using System.Windows.Input;
using Xamarin.Forms;
namespace ProjectName.CustomControls
{
public class HorizontalListview : ScrollView
{
public static readonly BindableProperty ItemsSourceProperty =
BindableProperty.Create("ItemsSource", typeof(IEnumerable), typeof(HorizontalListview), default(IEnumerable));
public IEnumerable ItemsSource
{
get { return (IEnumerable)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
public static readonly BindableProperty ItemTemplateProperty =
BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(HorizontalListview), default(DataTemplate));
public DataTemplate ItemTemplate
{
get { return (DataTemplate)GetValue(ItemTemplateProperty); }
set { SetValue(ItemTemplateProperty, value); }
}
public event EventHandler<ItemTappedEventArgs> ItemSelected;
public static readonly BindableProperty SelectedCommandProperty =
BindableProperty.Create("SelectedCommand", typeof(ICommand), typeof(HorizontalListview), null);
public ICommand SelectedCommand
{
get { return (ICommand)GetValue(SelectedCommandProperty); }
set { SetValue(SelectedCommandProperty, value); }
}
public static readonly BindableProperty SelectedCommandParameterProperty =
BindableProperty.Create("SelectedCommandParameter", typeof(object), typeof(HorizontalListview), null);
public object SelectedCommandParameter
{
get { return GetValue(SelectedCommandParameterProperty); }
set { SetValue(SelectedCommandParameterProperty, value); }
}
public void Render()
{
if (ItemTemplate == null || ItemsSource == null)
return;
var layout = new StackLayout();
layout.Spacing = 0;
layout.Orientation = Orientation == ScrollOrientation.Vertical ? StackOrientation.Vertical : StackOrientation.Horizontal;
foreach (var item in ItemsSource)
{
var command = SelectedCommand ?? new Command((obj) =>
{
var args = new ItemTappedEventArgs(ItemsSource, item);
ItemSelected?.Invoke(this, args);
});
var commandParameter = SelectedCommandParameter ?? item;
var viewCell = ItemTemplate.CreateContent() as ViewCell;
viewCell.View.BindingContext = item;
viewCell.View.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = command,
CommandParameter = commandParameter,
NumberOfTapsRequired = 1
});
layout.Children.Add(viewCell.View);
}
Content = layout;
}
}
2)在XAML页面中包含命名空间
xmlns:control="clr-namespace:ProjectName"
3)在您的设计中使用控件
<control:HorizontalListview Orientation="Horizontal" x:Name="lst">
<control:HorizontalListview.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Style="{StaticResource lblPlaceNumberRing}" />
</ViewCell>
</DataTemplate>
</control:HorizontalListview.ItemTemplate>
</control:HorizontalListview>
4)制作适用于Android的渲染器
using System;
using System.ComponentModel;
using ProjectName;
using ProjectName.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(HorizontalListview), typeof(HorizontalListviewRendererAndroid))]
namespace ProjectName.Droid.Renderers
{
public class HorizontalListviewRendererAndroid : ScrollViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
var element = e.NewElement as HorizontalListview;
element?.Render();
if (e.OldElement != null)
e.OldElement.PropertyChanged -= OnElementPropertyChanged;
e.NewElement.PropertyChanged += OnElementPropertyChanged;
}
protected void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (ChildCount > 0)
{
GetChildAt(0).HorizontalScrollBarEnabled = false;
GetChildAt(0).VerticalScrollBarEnabled = false;
}
}
}
}
5)制作适用于iOS的渲染器
using System;
using UIKit;
using ProjectName.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using ProjectName;
using System.ComponentModel;
[assembly: ExportRenderer(typeof(HorizontalListview), typeof(HorizontalListviewRendererIos))]
namespace ProjectName.iOS.Renderers
{
public class HorizontalListviewRendererIos : ScrollViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
var element = e.NewElement as HorizontalListview;
element?.Render();
if (e.OldElement != null)
e.OldElement.PropertyChanged -= OnElementPropertyChanged;
e.NewElement.PropertyChanged += OnElementPropertyChanged;
}
protected void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
this.ShowsHorizontalScrollIndicator = false;
this.ShowsVerticalScrollIndicator = false;
this.AlwaysBounceHorizontal = false;
this.AlwaysBounceVertical = false;
this.Bounces = false;
}
}
}
答案 1 :(得分:0)
感谢您的回答,我使用了DynamicStackLayout,这符合我的要求。这是github网址https://github.com/SuavePirate/DynamicStackLayout,这是nuget package https://www.nuget.org/packages/DynamicStackLayout/
答案 2 :(得分:0)
使用全新的“收藏夹视图”控件。它具有比列表视图更多的功能,包括对水平列表的支持。