Xamarin Forms ListView Header Problems

Question

I have a sample project where I am trying to do two things as identified below. All properties are in the same ViewModel.

I am attempting to hide the header by setting the visibility of all the objects in the HeaderTemplate to false by binding the visibility property to a property in my viewmodel. This is not working. What I really want is a way to turn on and off the header, in code is fine but I would prefer in XAML. All the code is below. Any suggestions would be appreciated.

NOTE: I have already tried putting all the Header properties into their own class, instantiating an instance of the class in my ViewModel and setting the Header Binding to that class with each header label binding to a property of that class. This did not work either.

XAML Code

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace SampleHeaderFooter
{
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        PlacesVM lobj_PlaceVM = new PlacesVM();
        BindingContext = lobj_PlaceVM;
    }

    private void btnSettings_Clicked(object sender, EventArgs e)
    {

    }
  }
}

ViewModelClass

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SampleHeaderFooter
{
    public class GBSPlaceDetail
    {
        /// 
        /// Name / Title of the Place
        /// 
        public string Title { get; set; }
    }

    public class PlacesVM
    {
        private bool ib_HeaderVisible = false;
        private string is_HeaderText = "";

        /// 
        /// Indicates if the header should be visible.  This only happens when a query was performed using the values as specified in the settings and no locations 
        /// were returned.
        /// 
        public bool HeaderVisible
        {
            get
            {
                return ib_HeaderVisible;
            }

            set
            {
                ib_HeaderVisible = value;
            }
        }

        /// 
        /// The Text that should appear in the header.
        /// 
        public string HeaderText
        {
            get
            {
                return is_HeaderText;
            }
            set
            {
                is_HeaderText = value;
            }
        }

    /// 
    /// A collection for Nearby Place objects.
    /// 
    public ObservableCollection GBSPlaceDetails { get; private set; }


        /// 
        /// Constructor for the Places View Model
        /// 
        public PlacesVM()
        {
            this.GBSPlaceDetails = new ObservableCollection();

            this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 1" });
            this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 2" });
            this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 3" });
            this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 4" });
            this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 5" });
            this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 6" });

            HeaderVisible = false;
            HeaderText = "This is my header text.";            
        }

    }
}

Yuri S · Accepted Answer

I set header to be visible at the beginning so you can click on Settings text. Few changes required.

In xaml copied only top part with changes, the rest is the same

In code MainPage:

public partial class MainPage : ContentPage
{
    PlacesVM lobj_PlaceVM;

    public HiddenHeaderPage()
    {
        InitializeComponent();

        lobj_PlaceVM = new PlacesVM();
        BindingContext = lobj_PlaceVM;
    }

    private void btnSettings_Clicked(object sender, EventArgs e)
    {
        lobj_PlaceVM.HeaderVisible = !lobj_PlaceVM.HeaderVisible;
    }
}

In code of model:

public class PlacesVM : INotifyPropertyChanged
{
    private bool ib_HeaderVisible = false;
    private string is_HeaderText = "";

    /// 
    /// Indicates if the header should be visible.  This only happens when a query was performed using the values as specified in the settings and no locations 
    /// were returned.
    /// 
    public bool HeaderVisible
    {
        get
        {
            return ib_HeaderVisible;
        }

        set
        {
            ib_HeaderVisible = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    /// 
    /// The Text that should appear in the header.
    /// 
    public string HeaderText
    {
        get
        {
            return is_HeaderText;
        }
        set
        {
            is_HeaderText = value;
        }
    }

    /// 
    /// A collection for Nearby Place objects.
    /// 
    public ObservableCollection GBSPlaceDetails { get; private set; }


    /// 
    /// Constructor for the Places View Model
    /// 
    public PlacesVM()
    {
        this.GBSPlaceDetails = new ObservableCollection();

        this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 1" });
        this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 2" });
        this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 3" });
        this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 4" });
        this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 5" });
        this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 6" });

        HeaderVisible = true;
        HeaderText = "This is my header text.";
    }

}

Xamarin Forms ListView Header Problems

Answers (1)

Related Questions