bananajoey88
bananajoey88

Reputation: 69

.NET Maui: ListView reselect Selected Item

I have .NET Maui app in which I display a ListView of ViewCells. When I select an ListView Item it will navigate to a different Page, when I navigate back from that page I either want to unselect the selected Item or I want it so that when I click the selected Item again, to refire that set event

XAML:

      <ListView ItemsSource="{Binding Keys}" SelectedItem="{Binding SelectedKey}">
              ...
      </ListView>

View Model:

        private Key _selectedKey;
        public Key SelectedKey
        {
            get => _selectedKey;
            set
            {
                SetProperty(ref _selectedKey, value);

                if (value != null && Shell.Current.IsLoaded) 
                {
                   SetProperty(ref _selectedKey, null);

                   Shell.Current.GoToAsync($"{nameof(EditKeyPage)}?Id={value.Id}");
                }
            }
        }

Upvotes: 0

Views: 1801

Answers (1)

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13889

You can set the SelectedModel to null after you navigating to another page.

Please refer to the following code snippet:

        private Key _selectedModel;
        public  Key SelectedModel
        {
            get { return _selectedModel; }
            set
            {
                SetProperty(ref _selectedModel, value);

                if (SelectedModel != null)
                {  
                    Shell.Current.GoToAsync(nameof(DetailPage));
                    
                    // set the SelectedItem to null here
                    SelectedModel = null;
                }

            }
        }

I achieved this function on my side, you can refer to the whole code of my viewmodel:

 public class MyViewModel: INotifyPropertyChanged 
    {
        public ObservableCollection<Rayon> Sections { get; set; } = new ObservableCollection<Rayon>();

        private Rayon _selectedModel;
        public Rayon SelectedModel
        {
            get { return _selectedModel; }
            set
            {
                SetProperty(ref _selectedModel, value);

                if (SelectedModel != null)
                {

                    Shell.Current.GoToAsync(nameof(DetailPage));

                    SelectedModel = null;
                }

            }
        }

        public MyViewModel() {
            Sections.Add(new Rayon { SectionName= "section_1",Price=100.0});
            Sections.Add(new Rayon { SectionName= "section_2", Price = 100.0 });
            Sections.Add(new Rayon { SectionName= "section_3", Price = 100.0 });
    
        }
    
        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;

    }

Note:

Remember to set the Mode to TwoWay.

Usage example:

    <ListView ItemsSource="{Binding Sections}" HasUnevenRows="True" 
              SelectedItem="{Binding SelectedModel,Mode=TwoWay}"
              >

              <!--  other code -->
     </ListView>

Upvotes: 1

Related Questions