How to refresh treeview when ItemsSource changes? - wpf

Question

My TreeView is bound to an ObservableCollection and uses HierarchicalDataTemplates.
I get the models from a web service.
Only when users click a node in tree, a web service call will be sent to get its child items.
My App has a TabControl, TreeView is on one tabpage, the other tabpage has a datagrid - it has some data selected from treeview. When an item in datagrid is right clicked, I want to locate the item on treeview. But now the issue is when I iterate the treeview,
say, I have an item called
A.A1.A11
and my TreeView has 3 items in the first level:
A
B
C
when I locate A.A1.A11, I want to expand A, A1, and highlight A11.
When I iterate the treeview, first I find A, it matches first path of A.A1.A11,
so I send a web service request to get A's children.
Once I get that, DataContext of the TreeViewItem of A is updated, but the TreeViewItem itself is not.
So when I check A.Items, it is empty and iteratation is unable to continue.
How can I refresh the TreeView & TreeViewItem when its ItemsSource changes?
Here is the xaml for treeview definition
<TreeView x:Name="TreeRoot"
ItemsSource="{Binding RootItems}"
TreeViewItem.Expanded="TreeViewExpanded"
TreeView.SelectedItemChanged="TreeRootSelectedItemChanged"
ContextMenu="{StaticResource DataGridContextMenu}"
PreviewKeyDown="TreeViewKeyDown"
PreviewMouseLeftButtonDown="TreeViewPreviewLeftMouseButtonDown"
PreviewMouseMove="TreeViewPreviewMouseMove" >
<TreeView.Resources>
<HierarchicalDataTemplate
DataType="{x:Type m:TreeModelBase}"
ItemsSource="{Binding Children}">
<StackPanel>
<Image Source="{Binding ImageFilePath}" />
<TextBlock Text="{Binding Name}" />
<!-- other items removed for brevity -->
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}"
Value="True">
<Setter Property="Background" Value="DodgerBlue"/>
<Setter Property="TextBlock.Foreground"
Value="White"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected}"
Value="False">
<Setter Property="Background" Value="White"/>
<Setter Property="TextBlock.Foreground"
Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>

Answer 1

Does RootItems implement INotifyProperty changed and are you calling NotifyPropertyChanged? Collections need to be an ObservableCollection (not a List) for the UI to know about updates.

Answer 2

When populating TreeViewItem's children, you don't update DataContext, you update ItemsSource. So after the service gets the children for A, you need to assign the resulting List (or ObservableCollection) to A.ItemsSource.

Answer 3

In case you're using DataContext and proper data binding technique, update of the TreeViewItem can be achieved by connecting PropertyChanged to each item and deriving TreeViewItem like mentioned below (resetting DataContext and template of the tree item).
This example refreshes only 2nd level items (second condition), might be easily extended of course.
In my case ElementItem is the base class for every item in ObservableList and implements INotifyProperty.
...
itemInObservableList.PropertyChanged += Ep_PropertyChanged;
...
private void Ep_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
var twi = this.pageList.ItemContainerGenerator.ContainerFromItem(
(sender as ElementItem).Parent ) as TreeViewItem;
if (twi != null)
{
var twii = twi.ItemContainerGenerator.ContainerFromItem(sender) as TreeViewItem;
if (twii != null)
{
//second level items refresh
var dc = twii.DataContext;
var tpl = twii.Template;
twii.DataContext = null;
twii.Template = null;
twii.DataContext = sender ;
twii.Template = tpl;
twii.UpdateLayout();
}
}
}

Answer 4

I found & managed to get it work. but it is really not optimal at all. What I did, iterate viewModel first, send web service request to get A's children, then send another request to get A1's children. This is the first pass. Second, search treeview from root and generate ItemContainers while iteration. First, search root of tree, get node A (treeviewItem), then apply template, get container from ItemContainerGenerator (see detail # How to refresh treeview when ItemsSource changes?), then I am able to find the item on treeview and expand its path. Anyone knows a better way, let me know. thanks