Lazy loading in TabControls (MVVM)

Question

I have a TabControl that displays a collection of my ViewModels. The mapping between the ViewModel and the View is implemented by the DataTemplate. I am using MVVM, but without PRISM (for historical reasons). The base class ViewModels has a method Loadthat loads information. What I want to do is call this method only when the TabItem corresponding to the current ViewModel (lazy loading) is selected. Any ideas? PS I found answers to a similar question - Lazy load WPF tab contents , but I can’t figure out how to use approach 2 in MVVM.

Answer 1

TabItem, since any Selector element has the IsSelected property. You can try to link it to the view model using two-way binding. If the IsSelected model is set to true for the first time, you can upload your data.

XAML:

<TabControl ...>
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="IsSelected"
                    Value="{Binding Path=IsSelected,Mode=TwoWay}"/>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

Sample Model:

public class MyViewModel : INotifyPropertyChanged
{
    private bool _isLoaded;

    private void Load()
    {
        // code
    }

    private bool _isSelected;

    public bool IsSelected
    {
        get
        {
            return this._isSelected;
        }
        set
        {
            if (this._isSelected != value)
            {
                this._isSelected = value;

                if (this._isSelected && !this._isLoaded)
                {
                    this.Load();
                    this._isLoaded = true;
                }

                var propertyChanged = this.PropertyChanged;
                if (propertyChanged != null)
                {
                    propertyChanged(this, new PropertyChangedEventArgs("IsSelected"));
                }
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

Answer 2

Another way. This basically mimics an event SelectedTabChangedin MVVM.

It works by binding a Nametab property to a property SelectedTabNamein the view model, to which you can do whatever you want (including preventing tab changes, setting the value back to its previous value).

ViewModel

    public string _selectedTabName;
    public string SelectedTabName
    {
        get { return _selectedTabName; }
        set
        {
            if (_selectedTabName != value)
            {
                _selectedTabName = value;
                RaisePropertyChanged("SelectedTabName");

                if (SelectedTabName == "EVENTS" && EventsLoaded == false)
                {
                    LoadEvents();
                }

                if (SelectedTabName == "MESSAGES" && MessagesLoaded == false)
                {
                    LoadMessages();
                }
            }
        }
    }

Xaml

 <TabControl SelectedValuePath="Name" SelectedValue="{Binding SelectedTabName}">
     <TabItem Header="Events" Name="EVENTS">
         ...
     </TabItem>
     <TabItem Header="Messages" Name="MESSAGES">
         ...
     </TabItem>
  </TabControl>