Xamarin 表单：根据字符串值隐藏 Flowlistview 项目，包括来自 UI 的 space

Question

我正在使用 flowlistview 列出图片。如果 pageStatus 值为 OFF，我需要隐藏图像；如果 pageStatus 值为 ON，我需要显示图像。我试过如下：

型号中：

public string pageStatus { get; set; }
public bool pictureStatus
        {
            get
            {
                if (pageStatus == "OFF")
                    return false;
                else
                    return true;
            }
        }

在 XAML 中为图像添加 IsVisible="{Binding pictureStatus}"。图片未显示在 UI 中，但空白 space 显示 OFF 状态图片，如下所示。

我还需要从 UI 中删除空白 space，我该怎么做？

Answer 1

您有两个选择，要么从 ListView ItemsSource 中完全删除该元素，要么在您的视图模型中实施更改的 INotifyProperty，以更改每个元素的可见性。这是一个小样本。

using System;
using System.ComponentModel;
using Xamarin.Forms;

namespace YourNameSpace
{
    public class YourViewModel : INotifyPropertyChanged
    {
        private string _pageStatus;
        private bool _pictureStatus;
        public event PropertyChangedEventHandler PropertyChanged;

        public string PageStatus
        {
            set
            {
                if (_pageStatus != value)
                {
                    _pageStatus = value;
                    if(_pageStatus.equals("OFF))
                    {
                        PictureStatus = false;
                    }
                    else
                    {
                        PictureStatus = true;
                    }
                    OnPropertyChanged("PageStatus");
                }
            }
            get
            {
                return _pageStatus;
            }
        }

        public bool PictureStatus
        {
            set
            {
                if (_pictureStatus != value)
                {
                    _pictureStatus = value;
                    OnPropertyChanged("PictureStatus");
                }
            }
            get
            {
                return _pictureStatus;
            }
        }



        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

然后，在XAML

IsVisible="{Binding PictureStatus}"

Answer 2

您可以轻松使用 IValueConverter:

XAML:

定义资源

xmlns:converter="clr-namespace:ConverterNamespace" 

   <flowlistview.Resources>
      <ResourceDictionary>
           <converter:VisibilityConverter x:Key="VisibilityConverter" />
      </ResourceDictionary>     
   </flowlistview.Resources>

绑定

IsVisible="{Binding pageStatus, Converter={StaticResource VisibilityConverter}}"

转换器Class:

public class VisibilityConverter: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {    
            if ((string)value == "ON" || (string)value != null)
                return true;
            else
                return false;    
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }    
    }

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

如果以后想改变属性值并通知listview，需要像上面那样使用INotifyPropertyChanged post.

在您的模型中：

 public class ModelClass : INotifyPropertyChanged
    {
        string _pagestatus;
        public string pageStatus
        {
            get
            {
                return _pagestatus;
            }
            set
            {
                _pagestatus = value;
                OnPropertyChanged();
            }
        }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string propName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    }
}

https://docs.microsoft.com/tr-tr/dotnet/api/system.componentmodel.inotifypropertychanged?view=netframework-4.7.2

Answer 3

您应该在绑定到列表视图的项目源之前过滤源数据。当你发现它的值为 ON 时，将它添加到你的最终项目源中。我在您的 PhotoGalleryViewModel 中修改您的代码，例如：

HttpClient client = new HttpClient();
var Response = await client.GetAsync("REST API");
if (Response.IsSuccessStatusCode)
{
    string response = await Response.Content.ReadAsStringAsync();
    PhotoAlbum photoAlbum = new PhotoAlbum();
    List<PhotoList> dataList = new List<PhotoList>();
    if (response != "")
    {
        photoAlbum = JsonConvert.DeserializeObject<PhotoAlbum>(response.ToString());
        foreach (var photos in photoAlbum.photoList)
        {
            if (!Items.Contains(photos))
            {
                Items.Add(photos);
            }

            // Instead of using primitive data, filter it here
            if (photos.pageStatus == "ON")
            {
                dataList.Add(photos);
            }
        }

        AllItems = new ObservableCollection<PhotoList>(dataList);
        await Task.Delay(TimeSpan.FromSeconds(1));
        UserDialogs.Instance.HideLoading();
    }
    else
    {
        UserDialogs.Instance.HideLoading();
        if (Utility.IsIOSDevice())
        {
            await Application.Current.MainPage.DisplayAlert("Alert", "Something went wrong, please try again later.", "Ok");
        }
        else
        {
            ShowAlert("Something went wrong, please try again later.");
        }
    }
}
else
{
    UserDialogs.Instance.HideLoading();
    if (Utility.IsIOSDevice())
    {
        await Application.Current.MainPage.DisplayAlert("Alert", "Something went wrong at the server, please try again later.", "Ok");
    }
    else
    {
        ShowAlert("Something went wrong at the server, please try again later.");
    }
}

Xamarin 表单：根据字符串值隐藏 Flowlistview 项目，包括来自 UI 的 space

Xamarin forms: Hide Flowlistview item including it's space from UI based on a string value

visibility

image

xamarin.forms