【发布时间】：2018-05-28 23:08:52
【问题描述】：
我在ListView 中显示 SQLite 对象列表，但我希望它们水平显示。所以不要这样：
| longitem |
| item |
| evenlongeritem |
| item |
| longeritem |
我想要这个：
| longitem item |
| evenlongeritem |
| item longeritem |
重要的是，项目可以有不同的宽度，因此仅将列表分成一定数量的列会有所改进，但并不理想。我也不知道物品的数量。
这是我目前拥有的代码：
<ListView x:Name="inactiveList" VerticalOptions="Start" ItemTapped="PutBack">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" TextColor="Black">
<TextCell.ContextActions>
<MenuItem Command="{Binding Source={x:Reference ListPage}, Path=DeleteListItem}" CommandParameter="{Binding .}" Text="delete" />
</TextCell.ContextActions>
</TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
代码背后：
public ListPage()
{
InitializeComponent();
ObservableCollection<ListItem> activeItems =
new ObservableCollection<ListItem>(
App.ListItemRepo.GetActiveListItems());
activeList.ItemsSource = activeItems;
...
我尝试将ViewCell 包裹在水平的StackLayout 中，但出现此错误：
未处理的异常：System.InvalidCastException：指定的转换是 无效。
我不确定该错误是否意味着，但我认为不可能在 DataTemplate 中添加 StackLayout。我也无法使ListView 水平。
--
更新 4：
我终于可以将简单的标签水平列出，但现在我无法重新创建垂直 ListView 中内置的点击和长按操作。有可能吗？
ListView.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns:local="clr-namespace:Myapp">
<!-- ... -->
<local:WrapLayout x:Name="inactiveList" ItemsSource="{Binding .}" Spacing="5" />
ListView.xaml.cs
using Myapp.Models;
using System;
using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.Linq;
using SQLite;
using System.Threading.Tasks;
using System.IO;
using Xamarin.Forms;
using System.Diagnostics;
using DLToolkit.Forms.Controls;
namespace Myapp
{
public partial class ListPage
{
...
public ListPage()
{
InitializeComponent();
ObservableCollection<ListItem> inactiveItems =
new ObservableCollection<ListItem>(
App.ListItemRepo.GetInactiveListItems());
inactiveList.ItemsSource = inactiveItems;
inactiveList.HeightRequest = 50 * inactiveItems.Count;
}
...
}
public class WrapLayout : Layout<View>
{
public ObservableCollection<ListItem> ItemsSource
{
get { return (ObservableCollection<ListItem>)GetValue(ItemSourceProperty); }
set { SetValue(ItemSourceProperty, value); }
}
public static readonly BindableProperty ItemSourceProperty =
BindableProperty.Create
(
"ItemsSource",
typeof(ObservableCollection<ListItem>),
typeof(WrapLayout),
propertyChanged: (bindable, oldvalue, newvalue) => ((WrapLayout)bindable).AddViews()
);
void AddViews()
{
Children.Clear();
foreach (ListItem s in ItemsSource)
{
Button button = new Button();
button.BackgroundColor = Color.Red;
button.Text = s.Name;
button.TextColor = Color.Black;
button.Clicked = "{Binding Source={x:Reference ListPage}, Path=PutBack}";
Children.Add(button);
}
}
public static readonly BindableProperty SpacingProperty =
BindableProperty.Create
(
"Spacing",
typeof(double),
typeof(WrapLayout),
10.0,
propertyChanged: (bindable, oldvalue, newvalue) => ((WrapLayout)bindable).OnSizeChanged()
);
public double Spacing
{
get { return (double)GetValue(SpacingProperty); }
set { SetValue(SpacingProperty, value); }
}
private void OnSizeChanged()
{
this.ForceLayout();
}
protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
if (WidthRequest > 0)
widthConstraint = Math.Min(widthConstraint, WidthRequest);
if (HeightRequest > 0)
heightConstraint = Math.Min(heightConstraint, HeightRequest);
double internalWidth = double.IsPositiveInfinity(widthConstraint) ? double.PositiveInfinity : Math.Max(0, widthConstraint);
double internalHeight = double.IsPositiveInfinity(heightConstraint) ? double.PositiveInfinity : Math.Max(0, heightConstraint);
return DoHorizontalMeasure(internalWidth, internalHeight);
}
private SizeRequest DoHorizontalMeasure(double widthConstraint, double heightConstraint)
{
int rowCount = 1;
double width = 0;
double height = 0;
double minWidth = 0;
double minHeight = 0;
double widthUsed = 0;
foreach (var item in Children)
{
var size = item.Measure(widthConstraint, heightConstraint);
height = Math.Max(height, size.Request.Height);
var newWidth = width + size.Request.Width + Spacing;
if (newWidth > widthConstraint)
{
rowCount++;
widthUsed = Math.Max(width, widthUsed);
width = size.Request.Width;
}
else
width = newWidth;
minHeight = Math.Max(minHeight, size.Minimum.Height);
minWidth = Math.Max(minWidth, size.Minimum.Width);
}
if (rowCount > 1)
{
width = Math.Max(width, widthUsed);
height = (height + Spacing) * rowCount - Spacing; // via MitchMilam
}
return new SizeRequest(new Size(width, height), new Size(minWidth, minHeight));
}
protected override void LayoutChildren(double x, double y, double width, double height)
{
double rowHeight = 0;
double yPos = y, xPos = x;
foreach (var child in Children.Where(c => c.IsVisible))
{
var request = child.Measure(width, height);
double childWidth = request.Request.Width;
double childHeight = request.Request.Height;
rowHeight = Math.Max(rowHeight, childHeight);
if (xPos + childWidth > width)
{
xPos = x;
yPos += rowHeight + Spacing;
rowHeight = 0;
}
var region = new Rectangle(xPos, yPos, childWidth, childHeight);
LayoutChildIntoBoundingRegion(child, region);
xPos += region.Width + Spacing;
}
}
}
}
【问题讨论】：
-
在 ItemsPanelTemplate 中使用 UniformGrid，列设置为您需要的数量，行 = 1
-
@KevinCook 问题是，我不确定我需要多少列，因为不同的项目会有不同的长度。
-
1) 使用自定义布局，Xamarin 有一个符合您需求的示例，WrapLayout：developer.xamarin.com/guides/xamarin-forms/user-interface/…（注意：我不知道您希望在此配置中有多少项目，所以性能/内存（ ！）可能是一个问题）。 2) 否则 CollectionViews...
-
@SushiHangover 我不确定我是否正确阅读指南。我是否必须在后面的代码中添加一个新类才能将 WrapLayout 添加到我的 xaml 中？
-
是的，您正在项目中创建一个名为
WrapLayout的Layout<View>的新子类，然后您将在 XAML（或代码）中使用它
标签： c# xaml listview xamarin xamarin.forms