Is it possible to show and hide elements of the same list depending on some values?

Question

I have created a query that returns a list and I would like to hide or show an icon depending on a string values like this, but i dont know if its possible.

https://i.stack.imgur.com/eiP57.png

I tried to binding the StackLayout but it didn't work.

XAML The elements its on a CollectionView:

https://i.stack.imgur.com/PB7cT.png

VIEWMODEL

https://i.stack.imgur.com/A5qjY.png https://i.stack.imgur.com/kuuiE.png

VIEW

https://i.stack.imgur.com/38ah4.png

the two icons should disappear in one of the elements

Any other solution?

Thank you so much in advance

Answer 1

From the YouPage.xaml code you posted, I found that the property IsVisibleIcons should belong to each item of the List you want to show, right?

Then, if you want to hide or show an icon based on the value of IsVisibleIcons of the Item, you need to change the value of the Item in the list (yours is conversations).But from the screenshot you shared , the IsVisibleIcons field appears to be a global variable, not a property of the Item.

foreach(var item in conversations){
  if(item.UserCreate == UserEmail){
        IsVisibleIcons = true;
        // please check above code, if it should be `item.IsVisibleIcons = true;`
    }   
}

Besides, I couldn't see the other code, but you also need to implement interface INotifyPropertyChanged for your Item model.

Based on your code, I achieved a simple demo , you can refer to the following code:

TestPage.xaml.cs

public partial class TestPage : ContentPage 
{
    MyViewModel viewModel;
    public TestPage()
    {
        InitializeComponent();

        viewModel = new MyViewModel();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();

        myCollectioNView.ItemsSource = null;
        myCollectioNView.ItemsSource = viewModel.Items;

   // here I changed the value of property `IsVisibleIcons` of item
        foreach (Item item in viewModel.Items) {
            if (item.Name.Equals("test3")) {
                item.IsVisibleIcons = false;
            }
        }
    }
}

TestPage.xaml.cs

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListViewApp.TestPage">
    <ContentPage.Content>
        <StackLayout>
            <CollectionView 
                 x:Name="myCollectioNView"
                 SelectionMode="Single"
                       >
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                   <!--here, bind property `IsVisibleIcons`  -->

                            <Image Grid.RowSpan="2" 
                               Source="icon.png" 
                               Aspect="AspectFill"
                               HeightRequest="60" 
                               WidthRequest="60" 
                               IsVisible="{Binding IsVisibleIcons}"   
                                   />
                            <Label Grid.Column="1" 
                               Text="{Binding Name}" 
                               FontAttributes="Bold" />
                            <Label Grid.Row="1"
                               Grid.Column="1" 
                               Text="{Binding Description}"
                               FontAttributes="Italic" 
                               VerticalOptions="End" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

MyViewModel.cs

public class MyViewModel 
    {
        public ObservableCollection<Item> Items { get; set; }

        public MyViewModel() {
            Items = new ObservableCollection<Item>();

            Items.Add(new Item { Name = "test1", Description= "Description 1", IsVisibleIcons = true });
            Items.Add(new Item { Name = "test2", Description = "Description 2", IsVisibleIcons = true });
            Items.Add(new Item { Name = "test3", Description = "Description 3", IsVisibleIcons = true });
            Items.Add(new Item { Name = "test4", Description = "Description 4", IsVisibleIcons = true });
            Items.Add(new Item { Name = "test5", Description = "Description 5", IsVisibleIcons = true });
            Items.Add(new Item { Name = "test6", Description = "Description 6", IsVisibleIcons = true });
    }
}

Item.cs

public class Item: INotifyPropertyChanged 
{
     public string Name { get; set; }
     public string Description { get; set; }
    // public bool IsVisibleIcons { get; set; }

    bool isVisibleIcons;
    public bool IsVisibleIcons
    {
        get => isVisibleIcons;
        set => SetProperty(ref isVisibleIcons, value);
    }

    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}