We Keep Coding

C# ObservableCollection dosen't appear in TreeView by MVVM

So I have a collection with Name, Code, Id and List with node type ServiceTypeDto like this model:
public class ServiceTypeDto
{
public long Id
public string Code
public string Name
public List<ServiceTypeDto> ChildrenList
}
I have a method which returns a list of ServiceTypeDtos, like this:
I have a ChildernList that exposes the ServiceTypeDtos.
This is how I try to do this in the ViewModel:
using System.Collections.Generic;
using System.Collections.ObjectModel;
using ServiceTypeService.Dto;
using ServiceTypeService.Interface;
using ShowServiceType.Interfaces;
using ShowServiceType.Utils;
namespace ShowServiceType.ViewModel
{
class MainWindowViewModel : ViewModelBase
{
public string _name, _code;
public long _id;
public List<ServiceTypeDto> _childrenList = new List<ServiceTypeDto>();
/// <summary>
/// Create Services for work
/// </summary>
ILogService Log => Service.CreateLog();
IExceptionHandler ExceptionHandler => Service.CreateExeptionHandler();
IServiceType ServiceType => Service.CreateGetServiceType();
public ObservableCollection<ServiceTypeDto> _servicesCollection;
public MainWindowViewModel()
{
ServiceConfig.Initialization();
var _services = ServiceType.GetServiceTypesTree();
_servicesCollection = new ObservableCollection<ServiceTypeDto>();
//This is convert to ObservableCollection my List<> =)
foreach (var item in _services)
_servicesCollection.Add(item);
}
public long ID
{
get => _id;
set
{
_id = value;
OnPropertyChanged("ID");
}
}
public string Code
{
get => _code;
set
{
_code = value;
OnPropertyChanged("Code");
}
}
public string Name
{
get => _name;
set
{
_name = value;
OnPropertyChanged("Name");
}
}
public List<ServiceTypeDto> Children
{
get => _childrenList;
set
{
_childrenList = value;
OnPropertyChanged("Children");
}
}
}
}
My ViewModelBase type:
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged( string propname ) => PropertyChanged?.Invoke(this , new PropertyChangedEventArgs(propname));
}
Code-behind of my main window:
public MainWindow()
{
InitializeComponent();
ServiceConfig.Initialization();
DataContext = new MainWindowViewModel();
}
Finally this is the XAML of the view.
<Grid Grid.Row="1">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible">
<TreeView>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
<StackPanel FlowDirection="LeftToRight" Orientation="Horizontal">
<TextBlock Text="{Binding ID}" />
<TextBlock Text="{Binding Code}" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</ScrollViewer>
</Grid>
The ObservableCollection dosen't appear in the TreeView. What is wrong?

There are multiple issues in your view and view model:
The TreeView is not bound to anything, bind its ItemSource to Children, otherwise it will not show any items
The ItemsSource of the HierarchicalDataTemplate must be bound to the child collection within your ServiceTypeDto, which is ChildrenList, not Children
You do not populate the Children collection (or its backing collection _childrenList ), so it is empty.
You add items to _servicesCollection, but it is not used either
The ServiceTypeDto does not implement INotifyPropertyChanged, so changes of properties will not be reflected in the user interface
ChildrenList in the ServiceTypeDto is not an ObservableCollection, so adding or removing items will also not be reflected in the user interface
You should consider using a naming convention like Children for your property and _children for the backing field to improve readability of your code, look here for reference on naming in C#.

1) Ok I bound on View my TreeView.ItemSource to ChildrenList
2) I don't understand how I bound ChildList in collection ServiceTypeDto to my ObserveCollection, How I understand wich index I select on UI ?
public List<ServiceTypeDto> ChildrenList
{
get => _servicesCollection[0].ChildrenList; // ? index ?
set
{
_servicesCollection[0].ChildrenList = value; // ? 0 ?
OnPropertyChanged("ChildrenList");
}
}
public string Name
{
get => _servicesCollection[0].Name; // ? 0 ?
set
{
_servicesCollection[0].Name = value; // ?
OnPropertyChanged("Name");
}
}
And other properties must know index to request from _servicesCollection[index].Name correct data?
3) I cant change ChildrenList in ServiceTypeDto to ObserveCollection out off dll, by condition of task.
This is just Reference.
After this, I dont know how but its work with 0 index !
But work only first Nodes don't appear other list in subList
<Grid Grid.Row="1">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible">
<TreeView ItemsSource="{Binding Path=ChildrenList}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=ChildrenList}">
<StackPanel FlowDirection="LeftToRight" Orientation="Horizontal">
<TextBlock Text="{Binding ID}" />
<TextBlock Text="{Binding Code}" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</ScrollViewer>
</Grid>

WPF MVVM moving a UserControl from one ObservableCollection to another by event

I have a checklist view that has 2 ScrollViewers. One checklist is for incomplete items, the other is for complete items. They are populated by 2 separate observable collections and bound to by ItemsControls.
The UserControl has a button, when clicked will move that 'check' to the other collection.
Currently the way I have this setup is in the ViewModel that's the DataContext for the UserControl there is a public event that is subscribed to by the main window's VM by using:
((CheckItemVM) ((CheckListItem) cli).DataContext).CompleteChanged += OnCompleteChanged;
where cli is the checklist item.
then the OnCompleteChanged finds the appropriate View object by using:
foreach (object aCheck in Checks)
{
if (aCheck.GetType() != typeof (CheckListItem)) continue;
if (((CheckListItem) aCheck).DataContext == (CheckItemVM) sender)
{
cliToMove = (CheckListItem) aCheck;
break;
}
}
It's pretty obvious this breaks MVVM and I'm looking for a way around it (CheckListItem is the View, and CheckItemVM is it's DataContext ViewModel). Reasoning for the boxed type is I've got another UserControl that will have instances inside both, which are basically section labels, and I need to be able to sort my observable collections where there is an association between the checklistitem to a specific section by name.

This can be done in MVVM using commands, and bindings....
The idea that I propouse here is to create a command in the Windows view model, that manage the check command, and this command to receive the item view model in the params, then manage the the things in the command. I'm going to show you a simple example, using MvvmLight library:
The model:
public class ItemViewModel : ViewModelBase
{
#region Name
public const string NamePropertyName = "Name";
private string _name = null;
public string Name
{
get
{
return _name;
}
set
{
if (_name == value)
{
return;
}
RaisePropertyChanging(NamePropertyName);
_name = value;
RaisePropertyChanged(NamePropertyName);
}
}
#endregion
#region IsChecked
public const string IsCheckedPropertyName = "IsChecked";
private bool _myIsChecked = false;
public bool IsChecked
{
get
{
return _myIsChecked;
}
set
{
if (_myIsChecked == value)
{
return;
}
RaisePropertyChanging(IsCheckedPropertyName);
_myIsChecked = value;
RaisePropertyChanged(IsCheckedPropertyName);
}
}
#endregion
}
A simple model with two property, one for the name (an identifier) and another for the check status.
Now in the Main View Model, (or Windows view model like you want)....
First the Collections, one for the checked items, and another for the unchecked items:
#region UncheckedItems
private ObservableCollection<ItemViewModel> _UncheckedItems;
public ObservableCollection<ItemViewModel> UncheckedItems
{
get { return _UncheckedItems ?? (_UncheckedItems = GetAllUncheckedItems()); }
}
private ObservableCollection<ItemViewModel> GetAllUncheckedItems()
{
var toRet = new ObservableCollection<ItemViewModel>();
foreach (var i in Enumerable.Range(1,10))
{
toRet.Add(new ItemViewModel {Name = string.Format("Name-{0}", i), IsChecked = false});
}
return toRet;
}
#endregion
#region CheckedItems
private ObservableCollection<ItemViewModel> _CheckedItems;
public ObservableCollection<ItemViewModel> CheckedItems
{
get { return _CheckedItems ?? (_CheckedItems = GetAllCheckedItems()); }
}
private ObservableCollection<ItemViewModel> GetAllCheckedItems()
{
var toRet = new ObservableCollection<ItemViewModel>();
foreach (var i in Enumerable.Range(11, 20))
{
toRet.Add(new ItemViewModel { Name = string.Format("Name-{0}", i), IsChecked = true });
}
return toRet;
}
#endregion
And the command:
#region CheckItem
private RelayCommand<ItemViewModel> _CheckItemCommand;
public RelayCommand<ItemViewModel> CheckItemCommand
{
get { return _CheckItemCommand ?? (_CheckItemCommand = new RelayCommand<ItemViewModel>(ExecuteCheckItemCommand, CanExecuteCheckItemCommand)); }
}
private void ExecuteCheckItemCommand(ItemViewModel item)
{
//ComandCode
item.IsChecked = true;
UncheckedItems.Remove(item);
CheckedItems.Add(item);
}
private bool CanExecuteCheckItemCommand(ItemViewModel item)
{
return true;
}
#endregion
The magic here could be in the Data binding, in this case I used command parameter and the FindAncestor binding, check the Data Template:
<DataTemplate x:Key="UncheckedItemDataTemplate">
<Grid>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding IsChecked}" IsEnabled="False"/>
<Button Content="Check" Width="75" Command="{Binding DataContext.CheckItemCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}}" CommandParameter="{Binding Mode=OneWay}"/>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="CheckedItemDataTemplate">
<Grid>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding IsChecked}" IsEnabled="False"/>
</StackPanel>
</Grid>
</DataTemplate>
One data template for checked items, and another for unchecked items. Now the usage, this is simpler:
<ListBox Grid.Row="2" Margin="5" ItemsSource="{Binding UncheckedItems}" ItemTemplate="{DynamicResource UncheckedItemDataTemplate}"/>
<ListBox Grid.Row="2" Margin="5" Grid.Column="1" ItemsSource="{Binding CheckedItems}" ItemTemplate="{DynamicResource CheckedItemDataTemplate}"/>
This is a cleaner solution, hope is helps.

update style of selected item in tow way mode

i have a view that have a list view with data template
i need to set style on the selected item
but i need also when the selected item is been changed from the code it modify the selected item in the view
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Text, UpdateSourceTrigger=PropertyChanged}" Width="300" Height="50" TextAlignment="Center"/>
<ListView Grid.Row="1" ItemsSource="{Binding List, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" SelectedItem="{Binding SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate >
<Border BorderThickness="1" BorderBrush="White">
<Grid Height="20" Width="30" >
<TextBlock Text="{Binding Name}"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
there is a list view and textblock
i need when the selectedItem changed it changed the the background of the selected item
here is the viewmodel
public class MainViewModel : ViewModelBase
{
private Item selectedItem;
public ObservableCollection<Item> List { get; set; }
string text;
public string Text
{
get { return text; }
set
{
text = value;
OnPropertyChanged("Text");
}
}
public Item SelectedItem
{
get { return selectedItem; }
set{
if (value.Name != "Test1")
{
selectedItem = value;
Text = value.Name;
}
else
{
Text = string.Format("Test1 was selected but the selected item is {0}", selectedItem==null?"null":selectedItem.Name);
}
OnPropertyChanged("SelectedItem");
}
}
public MainViewModel()
{
List = new ObservableCollection<Item>()
{
new Item("Test1","Val1"),new Item("Test2","Val2"),new Item("Test3","Val3"),new Item("Test4","Val"),
};
OnPropertyChanged("List");
}
}
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(params string[] propertyNames)
{
if (PropertyChanged != null)
{
foreach (var propertyName in propertyNames)
{
var e = new PropertyChangedEventArgs(propertyName);
PropertyChanged(this, e);
}
}
}
}
public class Item : ViewModelBase
{
public string Name { get; set; }
public string Value { get; set; }
public Item(string name, string val)
{
Name = name;
Value = val;
OnPropertyChanged("Name");
}
}
note that when the Test1 Item selected the selected item didnot changed but in the view Test1 is marked as selected

At the point your MainViewModel.SelectedItem setter is called by the view, the view has already updated its selected item in the list. The binding simply informs the VM of this fact. The fact that you don't set MainViewModel.selectedItem means nothing to the view.
You would think that raising OnPropertyChanged("SelectedItem"); would force the view to re-evaluate its selected item, but in practice this does not work. I assume is down to some optimization within WPF or to prevent cyclic binding updates. (Remember you setter is already being called as part of a binding update, and you are trying to update the binding again)
If you wish to prevent something being selected in the view, then you need to disable it within the view, before it gets down to the VM. Here is one way of doing this.

Hierarchical structure in treeview (C#)

I want to visualize a hierarchical structure of objects in a treeview. I know that there are plenty of tutorials out there describing how to do that. In principle I think I even know what to do, but I am stuck. I hope someone can point out my mistake.
This is "myObject":
private int _id;
public virtual int Id
{
get
{
return this._id;
}
set
{
if(this._id != value)
{
this.OnPropertyChanging("Id");
this._id = value;
this.OnPropertyChanged("Id");
}
}
}
private string _name;
public virtual string name
{
get
{
return this._name;
}
set
{
if(this._name != value)
{
this.OnPropertyChanging("name");
this._name = value;
this.OnPropertyChanged("name");
}
}
}
private int? _parentId;
public virtual int? parentId
{
get
{
return this._parentId;
}
set
{
if(this._parentId != value)
{
this.OnPropertyChanging("parentId");
this._parentId = value;
this.OnPropertyChanged("parentId");
}
}
}
private MyObject _myObject1;
public virtual MyObject MyParentObject
{
get
{
return this._myObject1;
}
set
{
if(this._myObject1 != value)
{
this.OnPropertyChanging("MyParentObject");
this._myObject1 = value;
this.OnPropertyChanged("MyParentObject");
}
}
}
private IList<MyObject> _myObjects = new List<MyObject>();
public virtual IList<MyObject> MyChildObjects
{
get
{
return this._myObjects;
}
}
The important thing here is the list of child objects called "MyChildObjects".
The XAML looks as follows:
<TreeView ItemsSource="{Binding myObjects}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding myObjects/MyChildObjects}">
<TextBlock Text="{Binding name}" />
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
My problem now is that the treeview only shows a flat structure of all objects. The mistake most likely is in the XAML file, but I am not able to figure it out. What do I have to change to have the hierarchy in the treeview?
Thank you for your help!
Best regards

Try defining your HierarchicalDataTemplate in TreeView.Resources for DataType of MyObject:
<TreeView ItemsSource="{Binding myObjects}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:MyObject}" ItemsSource="{Binding MyChildObjects}">
<TextBlock Text="{Binding name}" />
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
also your ItemsSource path is wrong. When you use myObjects/ it means current item of myObjects. What you need is just ItemsSource="{Binding MyChildObjects}
Binding.Path:
When the source is a collection view, the current item can be specified with a slash (/). For example, the clause Path=/ sets the binding to the current item in the view. When the source is a collection, this syntax specifies the current item of the default collection view.

You've set up the ItemsSource, but I think you will also need to set up an ItemTemplate inside the HierachicalDataTemplate. Take a look here.

WPF TreeView-How to refresh tree after adding/removing node?

I refer to this article:
WPF TreeView HierarchicalDataTemplate - binding to object with multiple child collections
and modify the tree structure like:
Root
|__Group
|_Entry
|_Source
In Entry.cs:
public class Entry
{
public int Key { get; set; }
public string Name { get; set; }
public ObservableCollection<Source> Sources { get; set; }
public Entry()
{
Sources = new ObservableCollection<Source>();
}
public ObservableCollection<object> Items
{
get
{
ObservableCollection<object> childNodes = new ObservableCollection<object>();
foreach (var source in this.Sources)
childNodes.Add(source);
return childNodes;
}
}
}
In Source.cs:
public class Source
{
public int Key { get; set; }
public string Name { get; set; }
}
In XAML file:
<UserControl.CommandBindings>
<CommandBinding Command="New" Executed="Add" />
</UserControl.CommandBindings>
<TreeView x:Name="TreeView">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="TreeViewItem.IsExpanded" Value="True"/>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Root}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Path=Name}" IsEnabled="True">
</TextBlock>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Group}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Path=Name}" IsEnabled="True">
</TextBlock>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Entry}" ItemsSource="{Binding Items}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" IsEnabled="True">
<TextBlock.ContextMenu>
<ContextMenu >
<MenuItem Header="Add" Command="New">
</MenuItem>
</ContextMenu>
</TextBlock.ContextMenu>
</TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Source}" >
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</TreeView.Resources>
</TreeView>
In UserControl.cs:
public ObservableCollection<Root> Roots = new ObservableCollection<Root>();
public UserControl6()
{
InitializeComponent();
//...Add new node manually
TreeView.ItemsSource = Roots;
}
private void Add(object sender, ExecutedRoutedEventArgs e)
{
Entry ee = (Entry)TreeView.SelectedItem;
Source s3 = new Source() { Key = 3, Name = "New Source" };
ee.Sources.Add(s3);
}
When I click right button on specific node "Entry" to add a new node "Source" under Entry
(call "Add" method), I add a new "Source" object under Entry successfully, but I can't see this new node on treeview. How to refresh treeview when adding/deleting node?

Use ObservableCollection instead of IList if you want to notify the user interface that something in the collection has changed

As far as I'm concerned, changing of type for Items to ObservableCollection<T> will not resolve the problem. You need to implement INotifyPropertyChanged.
I tested both solutions for my tree view, because I faced the same problem.
In my case changing of type from IList to ObservableCollection didn't refreshed GUI. However when I changed my auto property:
public List<SourceControlItemViewBaseModel> Items { get; set; }
to
private IEnumerable<SourceControlItemViewBaseModel> _items;
public IEnumerable<SourceControlItemViewBaseModel> Items
{
get { return _items; }
set
{
_items = value;
OnPropertyChanged();
}
}
Namely, I've implemented INotifyPropertyChanged and that changed the situation. The method that builds the tree structure defines the actual type of Items as new List<T>(), but it works and refreshes the GUI .
Nevertheless my tree was built in pure MVVM pattern without usage code-behind.
I use
<TreeView ItemsSource="{Binding SourceControlStructureItems}" />
and in the view model I use:
currentVm.Items= await SourceControlRepository.Instance.BuildSourceControlStructureAsync(currentVm.ServerPath);
That means I didn't added/removed items, but I rebuilt Node's sub collection.

Use this class and any changes in Sources collection will update/refresh tree in UI.
public class Entry
{
public int Key { get; set; }
public string Name { get; set; }
public ObservableCollection<Source> Sources { get; set; }
public Entry()
{
Sources = new ObservableCollection<Source>();
}
public CompositeCollection Items
{
get
{
return new CompositeCollection()
{
new CollectionContainer() { Collection = Sources },
// Add other type of collection in composite collection
// new CollectionContainer() { Collection = OtherTypeSources }
};
}
}
}