Xamarin Listview StackLayout 项目之间的空间答案

【问题标题】：Xamarin Listview StackLayout space between itemsXamarin Listview StackLayout 项目之间的空间
【发布时间】：2017-01-27 10:40:51
【问题描述】：

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

我对此进行了谷歌搜索，但找不到适合我的答案。这是我发现的一个解决方案，它具有与我想要的相同但没有工作的结果：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>

我尝试了间距、填充和边距，但都没有奏效。

视觉结果/预期：

谢谢

【问题讨论】：

见stackoverflow.com/questions/30807313/…

标签： xaml xamarin.forms

【解决方案1】：

我刚刚发现我需要设置 HasUnevenRows=True。然后我改成 Grid，因为我想要一个 ">" 在最后：

<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>

【讨论】：

【解决方案2】：

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

【讨论】：

我使用 Padding="0,10"
这行得通——只要你不在 CellViews 中使用任何 ... ContextActions 不尊重任何边距/填充。

【解决方案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);

【讨论】：