Question

我试图显示包含某些项目的列表视图，我只想在这些项目之间留出一些空间。

我谷歌这个，但我找不到一个适合我的答案。这是一个解决方案，我发现它具有我想要的相同结果，但不起作用：https://stackoverflow.com/a/30827419/1845593

我使用的是xamarin表格2.3.2.127，我希望与xaml保持一致。

我的xaml代码：

<pages:MainXaml.Content>
<ListView x:Name="AccountsList"
          ItemsSource="{Binding Items}"
          SeparatorVisibility="None"
          BackgroundColor="Gray">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>
          <StackLayout BackgroundColor="White" Margin="0,0,0,20" >
            <Label Text="{Binding Name}"
                 VerticalTextAlignment="Center"
                 LineBreakMode="TailTruncation"
                   />
            <Label Text="{Binding Amount}"
                   VerticalTextAlignment="Center"
                   LineBreakMode="TailTruncation"/>
          </StackLayout>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
</pages:MainXaml.Content>

我尝试使用间距，填充和边缘，但没有一个工作。

视觉结果/预期：

由于

Answer 1

我发现我需要设置 HasUnevenRows = True 。然后我改为Grid，因为我想要一个“＆gt;”最后：

<ListView xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="ConsumerBanking.UserControls.AccountsListView"
          SeparatorVisibility="None"
          BackgroundColor="Transparent"
          HasUnevenRows="True" >

  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>

          <Grid BackgroundColor="White" Margin="0,0,0,1" >
            <Grid.RowDefinitions>
              <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Column="0" Margin="10,5,0,5">
              <Label Text="{Binding Name}"
                     VerticalTextAlignment="Center"
                     LineBreakMode="TailTruncation"/>
              <Label Text="{Binding Amount}"
                     VerticalTextAlignment="Center"
                     LineBreakMode="TailTruncation"
                     FontSize="Large"/>
            </StackLayout>

            <Label Text=">" Grid.Column="1" VerticalTextAlignment="Center" Margin="0,0,20,0"
                   FontSize="Large" TextColor="{StaticResource darkGray}"/>
          </Grid>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Answer 2

也可以将Margin="0,0,0,XSpaceBetweenRawsX"用于您选择在ViewCell中使用的任何主容器。 https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/margin-and-padding/

Answer 3

我最近想在ListView中实现相同的外观。但是，就我而言，我需要对ListView中的项目执行滑动上下文操作。使用上述方法，列表中显示项目的高度与上下文操作菜单的高度之间存在大小差异。

我想出的解决方案是利用ListView中的分组，每个分组包含一个项目，并添加一个自定义分组标题视图，该视图只是具有所需间距高度的透明视图。这样可以确保上下文菜单的大小等于项目的视图大小。

这是我用来创建和管理分组的简单类：

public class SingleItemGrouping<T>
{
    private ObservableCollection<SingleItemGroup<int, T>> _groups { get; set; } = new ObservableCollection<SingleItemGroup<int, T>>();
    public ObservableCollection<SingleItemGroup<int, T>> Groups { get { return _groups; } }

    private SingleItemGrouping(ObservableCollection<T> collection = null)
    {
        if (collection != null)
        {
            foreach (var item in collection)
            {
                this.Add(item);
            }
            collection.CollectionChanged += Collection_CollectionChanged;
        }
    }

    public static ObservableCollection<SingleItemGroup<int, T>> Create(ObservableCollection<T> collection)
    {
        SingleItemGrouping<T> ret = new SingleItemGrouping<T>(collection);
        return ret.Groups;
    }

    private void Collection_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        var collection = sender as ObservableCollection<T>;
        if (e.OldItems != null)
        {
            foreach (var item in e.OldItems)
            {
                this.Remove((T)item);
            }
        }
        if (e.NewItems != null)
        {
            foreach (var item in e.NewItems)
            {
                if (collection != null)
                {
                    var index = collection.IndexOf((T)item);
                    if (index >= 0)
                    {
                        Insert(index, (T)item);
                        continue;
                    }
                }
                Add((T)item);
            }
        }
    }

    public void Insert(int index, T item)
    {
        int groupKey = item.GetHashCode();
        _groups.Insert(index, new SingleItemGroup<int, T>(groupKey, item));
    }

    public void Add(T item)
    {
        int groupKey = item.GetHashCode();
        _groups.Add(new SingleItemGroup<int, T>(groupKey, item));
    }

    public void Remove(T item)
    {
        int groupKey = item.GetHashCode();
        var remove = _groups.FirstOrDefault(x => x.GroupKey == groupKey);
        if (remove != null)
        {
            _groups.Remove(remove);
        }
    }

}

public class SingleItemGroup<K, TItem> : ObservableCollection<TItem>
{
    public K GroupKey { get; private set; }
    public TItem Item { get { return Items[0]; } }
    public SingleItemGroup(K key, TItem item)
    {
        GroupKey = key;
        Items.Add(item);
    }
}

这是实现：

XAML：

       <ListView x:Name="listView"
                  HasUnevenRows="true"
                  SeparatorVisibility="None"
              IsGroupingEnabled="true">


            <ListView.GroupHeaderTemplate >
                <DataTemplate >
                    <ViewCell Height="20">
                        <Label />
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                       <ViewCell.ContextActions>    
                           <MenuItem Clicked="DeleteRecipe" CommandParameter="{Binding .}" Text="Delete" IsDestructive="True" />    
                       </ViewCell.ContextActions>

                     <!-- define viewcell contents here -->
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
       </ListView.ItemTemplate>

.CS

        listView.ItemsSource = SingleItemGrouping<MyViewModel>.Create(myObservableCollection);

Xamarin Listview项目之间的StackLayout空间

3 个答案: