Question

I have a following problem. I have some items in my treeview which are at the top of hierarchy. When I click on some item to expand it, it can event take 5 seconds to load all items in selected node. How can show “Please wait…expanding node..” message during this process? How can I determine whether item is still expanding or all nested items are loaded and presented now?

I have already asked very similar question here Show "Please wait.." message when expanding TreeView in WPF, I even mark the answer as accepted but however, the solution I have now is not satisfactory because “Please wait..” dialog is blinking (it’s shown and closed as many times as number of nested items).

Answer 1

As I’ve mentioned in comment to your post, two problems may exists we need to solve.

1. You have a lot of items, so when you expand node – wpf begins to generate item containers and put them into visual tree. It could be annoying.
2. On the other hand, I suppose next scenario – user expand node item and you send request to database/remote server which may execute some time.

WPF doesn’t provide BeforeExpand event, so you should use view data, notifications on property changed, data binding and observable collections. I’ll illustrate this in simple application.

The whole approach can be approximately described as:

• Bind IsExpanded property of view data to IsExpanded property of TreeViewItem
• Listen IsExpanded property changed notifications somewhere (may be in model)
• Set up IsLoading property (in my sapmle it is declared in view data)
• Start some task that fills inner items
• Reset IsLoading property
• Put DataTrigger in xaml, which reacts on IsLoading property.

I’ve designed my tree item ViewData class with observable properties IsExpanded, IsLoaded, observable collection of children items and Name that will be displayed:

public class TreeItem : ObservableObject
{
    public TreeItem (string name)
    {
        this.Name = name;
    }

    public string Name 
    {
        get; 
        private set; 
    }

    private bool _isExpanded;
    public bool IsExpanded
    {
        get
        {
            return this._isExpanded;
        }
        set
        {
            if (this._isExpanded != value)
            {
                this._isExpanded = value;
                this.OnPropertyChanged("IsExpanded");
            }
        }
    }

    private bool _isLoading;
    public bool IsLoading
    {
        get
        {
            return this._isLoading;
        }
        set
        {
            if (this._isLoading != value)
            {
                this._isLoading = value;
                this.OnPropertyChanged("IsLoading");
            }
        }
    }


    private ObservableCollection<TreeItem> _innerItems = new ObservableCollection<TreeItem>();
    public IEnumerable<TreeItem> InnerItems
    {
        get
        {
            return this._innerItems;
        }

    }

    public void LoadInnerItems()
    {
        this.IsLoading = true;
        var sc= SynchronizationContext.Current;
        new Thread(new ThreadStart(() => 
            {
                Thread.Sleep(5000);
                sc.Send(o =>
                    {
                        this._innerItems.Add(new TreeItem("1223"));
                        this._innerItems.Add(new TreeItem("2345"));
                        this._innerItems.Add(new TreeItem("666678"));
                        this.IsLoading = false;
                    }, null);
            }))
            .Start();
    }
}

Next step consists in developing Presentation Model. As you can see our model listens to IsExpanded PropertyChanged event and when it equals to true start LoadingInnerItems.:

public class SampleModel : ObservableObject
{
    public SampleModel()
    {
        this._items.Add(new TreeItem("AAA"));
        this._items.Add(new TreeItem("BBB"));
        this._items.Add(new TreeItem("CCC"));

        foreach (var i in this._items)
        {
            i.PropertyChanged += new PropertyChangedEventHandler(Item_PropertyChanged);
        }

    }

    void Item_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "IsExpanded")
        {
            var item = (TreeItem)sender;
            if(item.IsExpanded)
            {
                item.LoadInnerItems();
            }
        }
    }

    private ObservableCollection<TreeItem> _items = new ObservableCollection<TreeItem>();
    public IEnumerable<TreeItem> Items
    {
        get
        {
            return this._items;
        }
    }
}

XAML for our TreeView. When we are loading inner items – foreground of our treeviewitem goes red:

<TreeView ItemsSource="{Binding Items}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding InnerItems}">
            <TextBlock Text="{Binding Name}"/>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
    <TreeView.ItemContainerStyle>
        <Style TargetType="TreeViewItem">
            <Setter Property="IsExpanded"
                    Value="{Binding IsExpanded, Mode=TwoWay}"/>
            <Setter Property="Foreground"
                    Value="Aqua"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsLoading}"
                             Value="True">
                    <Setter Property="Foreground" 
                            Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
</TreeView>

And don’t forget set model as datacontext of view in code behind:

    public MainWindow()
    {
        InitializeComponent();

        this.Model = new SampleModel();
    }