如何在 xamarin.forms 中隐藏列表视图的空行

Question

我有一个 StackLayout 和一个 ListView，我有一个要显示在 ListView 正下方的添加按钮。但是 ListView 显示了许多未使用的行。只是空行，这迫使我的按钮显示在页面底部。我整天都在弄乱 VerticalOptions，但无法让行消失。

这是我的 XAML 代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:LiquitMobileApp"
             x:Class="LiquitMobileApp.MainPage"
             Title="Settings"
             >

    <StackLayout BackgroundColor="LightGray">
        <Label Text="Liquit Zones" TextColor="Gray" FontSize="Small" Margin="10"/>
        <StackLayout AbsoluteLayout.LayoutBounds="10,10,10,10">
            <ListView x:Name="UsingZone" SeparatorColor="LightGray" ItemTapped="ZonesList_ItemTapped" RowHeight="60" BackgroundColor="Green"  >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.ContextActions>
                                <MenuItem Clicked="OnEdit" Text="Edit" />
                                <MenuItem Clicked="OnDelete" CommandParameter="{Binding .}" Text="Trash" IsDestructive="True" />
                            </ViewCell.ContextActions>
                            <StackLayout Padding="15, 5, 0, 0" Orientation="Horizontal" BackgroundColor="White">
                                <Image Source="{Binding Image}" HorizontalOptions="Start" AbsoluteLayout.LayoutBounds="250.25, 0.25, 50, 50 "/>
                                <StackLayout Orientation="Vertical">
                                <Label Text = "{Binding Name}" FontSize="20" TextColor="Black" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>
                                <Label Text = "{Binding Address}" TextColor="LightGray" AbsoluteLayout.LayoutBounds="50, 35, 200, 25"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <Label />
                </ListView.Footer>
            </ListView>
            <Button Text="Add Zone" TextColor="Black" HorizontalOptions="FillAndExpand" FontSize="Medium" Clicked="Button_Clicked" BackgroundColor="White"/>
        </StackLayout>
    </StackLayout>
</ContentPage>

列表和按钮的图片：

Answer 1

大家好，

 public class Test
 {
    string Name{get;set;}
 }

全局声明

  ObservableCollection<Test> objWithEmpty;

在构造函数中：

 objWithEmpty=new ObservableCollection<Test>();
 objWithEmpty.Add(new Test(){"Venky"});
 objWithEmpty.Add(new Test(){""});
 objWithEmpty.Add(new Test(){"Raju"});

现在再取一个 ObservableCollection 并根据您的要求检查条件，不为空，然后将该项目添加到 objWithOutEmpty 集合，最后将 objWithOutEmpty ItemsSource 添加到 ListView。

  ObservableCollection<Test> objWithOutEmpty;

 foreach(var item in objWithEmpty)
   {
        if(item.Name !=null)
           {
                  objWithOutEmpty.Add(new Test(){item.Name});
           }
   };

现在将 ItemsSource 设置为 ListView

 listView.ItemsSource=objWithOutEmpty;

Answer 2

因此，我找到的解决方案是每次 add/remove 一个项目时都强制使用列表视图布局。 您还需要将列表包装在 stacklayout 中。

<StackLayout BackgroundColor="LightGray">
    <Label Text="Liquit Zones" TextColor="Gray" FontSize="Small" Margin="10"/>

    <StackLayout>
    <ListView x:Name="ItemsListView" SeparatorColor="LightGray" BackgroundColor="Green" RowHeight="60" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Clicked="AddItemClicked" Text="Add" />
                        <MenuItem Clicked="RemoveItemClicked" CommandParameter="{Binding .}" Text="Trash" IsDestructive="True" />
                    </ViewCell.ContextActions>
                    <StackLayout Padding="15, 5, 0, 0" Orientation="Horizontal" BackgroundColor="White">
                        <Image Source="{Binding Image}" HorizontalOptions="Start"/>
                        <StackLayout Orientation="Vertical">
                            <Label Text = "{Binding ItemText}" FontSize="20" TextColor="Black" />
                            <Label Text = "{Binding ItemDetail}" TextColor="LightGray" />
                        </StackLayout>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.Footer>
            <Label />
        </ListView.Footer>
    </ListView>
    </StackLayout>

    <Button Text="Add Item" TextColor="Black" HorizontalOptions="FillAndExpand" FontSize="Medium" Clicked="AddItemClicked" BackgroundColor="White"/>
</StackLayout>

因为您知道您的单元格高度，所以您可以这样做：

       void AddItemClicked(object sender, EventArgs e)
        {
            SampleData data = new SampleData();
            data.ItemText = "An Item";
            data.ItemDetail = "Item - " + (itemsListCollection.Count + 1).ToString();
            itemsListCollection.Add(data);

            ItemsListView.HeightRequest = itemsListCollection.Count * 60;
            //ForceLayout();
        }

    void RemoveItemClicked(object sender, EventArgs e)
    {

        SampleData item =(SampleData)((MenuItem)sender).CommandParameter;
        if (item != null)
        {
            itemsListCollection.Remove(item);
        }
        ItemsListView.HeightRequest = itemsListCollection.Count * 60;

    }


class SampleData:INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string itemText;
    public string ItemText
    {
        get
        {
            return itemText;
        }
        set
        {
            itemText = value;
            NotifyPropertyChanged("ItemText");
        }
    }
    private string itemDetail;
    public string ItemDetail
    {
        get
        {
            return itemDetail;
        }
        set
        {
            itemDetail = value;
            NotifyPropertyChanged("ItemDetail");
        }
    }
    private void NotifyPropertyChanged(string propName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propName));
        }
    }
}

Answer 3

删除 ListView 的空行的一种简单方法是为 ListView 设置一个空的页脚。

ListView HeaderList = new ListView()
    {
       Footer = ""
    };

或在XAML

<ListView  x:Name="HeaderList" Footer=""></ListView>

如何在 xamarin.forms 中隐藏列表视图的空行

How to hide the empty rows of a list view in xamarin.forms

c#

xaml

listview

portable-class-library

xamarin.forms