There seems to be a ton of information on HierarchicalDataTemplate, but I have had a hard time finding info specific enough to help me out with hierarchies containing different types.
Assuming the following class structure:
public class classA
{
public string name{get;set;}
}
public class classB
{
public string name{get;set;}
public List<classA> subItems{get;set;}
}
public class classC
{
public string name{get;set;}
public List<classB> subItems{get;set;}
}
Now taking into assumption the reason the classes aren't self referencing thus keeping one type throughout my hierarchy is that there are fundamental differences in properties contained theirin, is there a way to create a type sensitive HierarchicalDataTemplate?
HierarchicalDataTemplate has a DataType property, so you use that to specify the type just as you do for DataTemplate. Let's say you wrap your hierarchy in a view model:
public class MyViewModel
{
public List<classC> Items { get; set; }
}
And then create your hierarchy like so:
this.DataContext = new MyViewModel
{
Items = new List<classC>
{
new classC
{
name = "Class C",
subItems = new List<classB> {
new classB{
name = "Class B1",
subItems = new List<classA>{
new classA {name="Class A1a"},
new classA {name="Class A1b"},
new classA {name="Class A1c"},
}
},
new classB{
name = "Class B2",
subItems = new List<classA>{
new classA {name="Class A2a"},
new classA {name="Class A2b"},
new classA {name="Class A2c"},
}
}
}
}
}
};
Then in XAML all you need to do is add the relevant DataTemplates and HierarchicalDataTemplates to your TreeView's resources block:
<TreeView ItemsSource="{Binding Items}">
<TreeView.Resources>
<DataTemplate DataType="{x:Type local:classA}" >
<TextBlock Text="{Binding name}" Foreground="Blue" />
</DataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:classB}" ItemsSource="{Binding subItems}" >
<TextBlock Text="{Binding name}" Foreground="Green" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:classC}" ItemsSource="{Binding subItems}" >
<TextBlock Text="{Binding name}" Foreground="Red" />
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
Result:
Related
I have a treeView defined in XAML as:
<UserControl.Resources>
<models:TreeLines x:Key="myLines" x:Name="myLinesData"/>
</UserControl.Resources>
<TreeView
x:Name="treeData"
Grid.Column="1"
Padding="0,5,0,0"
Background="#282828"
BorderThickness="0"
SelectedValuePath="Uid">
<TreeViewItem
x:Name="tLines"
Uid="tabLines"
Header="Lines"
ItemsSource="{Binding Source={StaticResource myLines}, Path=MyLines}"
Style="{StaticResource custTVItem}">
<TreeViewItem.Resources>
<HierarchicalDataTemplate DataType="{x:Type models:Lines}" ItemsSource="{Binding lineSet}">
<TextBlock Text="{Binding productName}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type models:LineSets}" ItemsSource="{Binding lineName}">
<TextBlock Text="{Binding setName}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type models:LineNames}" ItemsSource="{Binding dataTypes}">
<TextBlock Text="{Binding lineName}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type models:LineData}" ItemsSource="{Binding dataVals}">
<TextBlock Text="{Binding dataType}" />
</HierarchicalDataTemplate>
</TreeViewItem.Resources>
</TreeViewItem>
</TreeView>
The UserControl.Resources is pointing towards a class:
public partial class TreeLines : ObservableObject
{
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(MainWindow.treeData.ItemsSource))]
private List<Lines>? myLines;
}
The error I get here is:
The target(s) of [NotifyPropertyChangedFor] must be a (different) accessible property
The object myLines I'm trying to bind to has the classes behind, as seen in the TreeView `HierarchicalDataTemplates:
public class Lines
{
public string productName { get; set; }
public List<LineSets> lineSet { get; set; }
}
public class LineSets
{
public string setName { get; set; }
public List<LineNames> lineName { get; set; }
}
public class LineNames
{
public string lineName { get; set; }
public List<LineData> dataTypes { get; set; }
}
public class LineData
{
public string dataType { get; set; }
public List<double> dataVals { get; set; }
}
If I remove all the CommunityToolkit.MVVM aspects and set my variable:
private List<Lines>? myLines; manually by changing it to public and assigning data to it on loading, then it populates on load only.
I need to modify myLines on the fly within my C# code which in-turn should update the treeView. You can see I'm trying to achieve this automatically with the data binding but something isn't right.
I think the mistakes could possibly be in the line:
[NotifyPropertyChangedFor(nameof(MainWindow.treeData.ItemsSource))]
and/or possibly the StaticResource usage in XAML:
<TreeViewItem
x:Name="tLines"
Uid="tabLines"
Header="Lines"
ItemsSource="{Binding Source={StaticResource myLines}, Path=linesCollection}"
Style="{StaticResource custTVItem}">
Please advise if you can help
Replace all List<T> properties with ObservableCollection<T>. Then the view will be updated whenever you add or remove items from these collections.
For the view to also update when you change a property of an individual item in a collection, the class of the property that you change should implement the INotifyPropertyChanged interface and raise change notifications.
Here is an example of how you should implement the Lines class:
public class Lines : ObservableObject
{
[ObservableProperty]
private string productName { get; set; }
[ObservableProperty]
private ObservableCollection<LineSets> lineSet { get; set; }
}
Bind to the generated properties (starting with an uppercase letter):
<HierarchicalDataTemplate DataType="{x:Type models:Lines}"
ItemsSource="{Binding LineSet}">
<TextBlock Text="{Binding ProductName}"/>
</HierarchicalDataTemplate>
[NotifyPropertyChangedFor(nameof(MainWindow.treeData.ItemsSource))] does not need to be added.
There is no need to implement additional notifications. Because [ObservableProperty] is already implementing the notification function.
Check out the auto-generated sources.
[NotifyPropertyChangedFor(parameter)]'s parameter should be the name of property inside the class.
public partial class TreeLines : ObservableObject
{
[ObservableProperty]
private List<Lines>? myLines;
public string OtherProperty1 { get; set; }
public string OtherProperty2 { get; set; }
}
In this case, the possible Arguments of [NotifyPropertyChangedFor] are only MyLines, OtherProperty1 , and OtherProperty2.
[NotifyPropertyChangedFor] is an attribute indicating that other properties connected within the class have changed
Here's an example.
public partial class GetSum : ObservableObject
{
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(Sum))]
private int num1;
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(Sum))]
private int num2;
public int Sum { get => num1 + num2; }
}
When calling the setter of Num1 Property,
simultaneously update the Num1 value and Sum value bound to the screen.
<Window x:Class="WpfApp2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp2"
Height="450" Width="800">
<Window.DataContext>
<local:GetSum/>
</Window.DataContext>
<StackPanel>
<TextBox Text="{Binding Num1}"/>
<TextBox Text="{Binding Num2}"/>
<TextBlock Text="{Binding Sum}"/>
</StackPanel>
</Window>
I want to create the hierarchical tree. I followed every step from here, but for some reason it shows me only one level deep.
Here's what I get:
What could be the reason?
XAML
<TreeView SelectedItemChanged="TreeView_SelectedItemChanged" ItemsSource="{Binding Items}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}" DataType="{x:Type local:MyClass}">
<TextBlock Foreground="Red" Text="{Binding Name}" />
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" MouseLeftButtonUp="TreeViewItem_MouseLeftButtonUp"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
VIEWMODEL
public class MyClass
{
public string Name { get; set; }
public List<MyClass> Children { get; set; }
}
public class MyViewModel
{
private List<MyClass> _items;
public List<MyClass> Items
{
get
{
return _items;
}
}
public MyViewModel()
{
_items = new List<MyClass>();
_items.Add(new MyClass
{
Name = "1",
Children = new List<MyClass>
{
new MyClass
{
Name = "1_1",
Children = new List<MyClass>
{
new MyClass
{
Name = "1_1_1"
},
new MyClass
{
Name = "1_1_2"
}
}
},
new MyClass
{
Name = "1_2"
}
}
});
}
}
You are defining your template as exactly two levels deep, so you are going to get a two level tree view. This is because you explicitly state that the ItemTemplate of the HeirarchicalDataTemplate should be a DataTemplate with no children.
I am not sure what your intended template is supposed to be, but if you remove that inner template you should get all of the items to display. Alternatively, you could make the inner template also a HeirarchicalDataTemplate.
I have the following task:
create Tree which user can modify through app UI - add new Items, delete existing one. TreeView control should be binded to appropriate List in code behind.
Items in tree are CriteriaItem objects.
public class Subcriteria
{
public Subcriteria(string header)
{
Title = header;
subcriterias = new ObservableCollection<Subcriteria>();
}
public string Title { get; set; }
public ObservableCollection<Subcriteria> subcriterias { get; set; }
}
public class Criteria
{
public Criteria(string header)
{
Title = header;
criterias = new ObservableCollection<Subcriteria>();
}
public string Title { get; set; }
public ObservableCollection<Subcriteria> criterias { get; set; }
}
public MainWindow()
{
InitializeComponent();
public ObservableCollection<Alternative> _alt = new ObservableCollection<Alternative>();
Criteria root = new Criteria("root");
criteriaBundle.Add(root);
trvMenu.DataContext = _alt;
}
XAML:
<TreeView Name="trvMenu" Grid.Row="2" ItemsSource="{Binding criteriaBundle}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding criterias}">
<TextBlock Text="{Binding Title}" />
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding subcriterias}">
<TextBlock Text="{Binding Title}" />
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Title}"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
But it doesn't work. Could you please assist me with binding?
You should change your code-behind like this:
1) You should set DataContext, if you use binding
2) You can use only Properties in binding, not fields
My personal advice that You should read about binding basic and MVVM
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
criteriaBundle = new ObservableCollection<CriteriaItem> {new CriteriaItem("root")};
}
public ObservableCollection<CriteriaItem> criteriaBundle { get; set; }
}
EDIT:
I'm trying to bind a collection to a treeview. My attempt so far have failed.
I miss something despite the articles I read about the matter.
So far I tried the something like, but the Treeview just plot the Id of class A and thats it, with no button to expand.
<Grid>
<TreeView HorizontalAlignment="Left" Height="270" VerticalAlignment="Top" Width="292" ItemsSource="{Binding ManagerObjects}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:ManagerObject}" ItemsSource="{Binding MyManager}">
<TextBlock Text="{Binding Id}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Manager}" ItemsSource="{Binding ManagerClientServerProperty}">
<TextBlock Text="{Binding ManagerClientServerProperty}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local1:ManagerClientServer}">
<TextBlock Text="TEST"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local1:NetworkObject}" ItemsSource="{Binding Entities}">
<TextBlock Text="TEST"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local1:RemoteEntity}" ItemsSource="{Binding Fields}">
<TextBlock Text="TEST"/>
<!-- how classD should look like -->
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
</Grid>
EDIT: ADDING REAL CODE
This is in my Model :
public class ManagerObject
{
// PROPERTIES
public int Id { get; private set; }
public Manager MyManager { get; private set; }
}
public class Manager
{
// FIELDS
private readonly ManagerClientServer managerClientServer;
// PROPERTIES
public ManagerClientServer ManagerClientServerProperty { get { return managerClientServer;} }
/**** OTHER STUFF NON IMPORTANT ****/
}
public class ManagerClientServer
{
// FIELDS
private readonly ObservableCollection<NetworkObject> Clients = new ObservableCollection<NetworkObject>();
private readonly ObservableCollection<NetworkObject> Servers = new ObservableCollection<NetworkObject>();
// PROPERTIES
public ObservableCollection<NetworkObject> ClientsProperty
{
get { return Clients; }
}
public ObservableCollection<NetworkObject> ServersProperty
{
get { return Servers; }
}
/*** OTHER STUFF NON IMPORTANT HERE ***/
}
public class NetworkObject
{
// FIELDS
private readonly ObservableCollection<RemoteEntity> _entities=new ObservableCollection<RemoteEntity>();
public uint NetworkId { get; private set; }
// PROPERTIES
public ObservableCollection<RemoteEntity> Entities
{
get { return _entities; }
}
// CONSTRUCTOR
public NetworkObject(uint id)
{
NetworkId = id;
}
}
public class RemoteEntity
{
// FIELDS
private readonly ObservableCollection<int> _fields=new ObservableCollection<int>();
// PROPERTIES
public bool IsLost { get; set; }
public bool NeedUpdate { get; set; }
public uint SessionId { get; private set; }
public ObservableCollection<int> Fields
{
get { return _fields; }
}
// CONSTRUCTOR
public RemoteEntity(uint id)
{
SessionId = id;
}
}
The ViewModel just expose this property:
public ObservableCollection<ManagerObject> ManagerObjects
{
get { return managerObjects; }
set
{
managerObjects = value;
NotifyOfPropertyChange(()=>ManagerObjects);
}
}
private ObservableCollection<ManagerObject> managerObjects;
The initialization is just 2 ManagerObject, after this they all include a random number of NetworkObjects in both Clients and Servers collection and each of those has a random number of Entities.
All collections here are Observable, however, they are of another type in real but they expose a method which can make them Observable so lets consider it this way.
Many Thanks.
Ah, I see your problem now and it's a really simple one. You can't expand anything because there is nothing to expand. Your TreeView.ItemsSource is bound to the ManagerObjects collection and that's ok, because it is a collection. However, in your HierarchicalDataTemplate for your ManagerObject data type, you have this:
<HierarchicalDataTemplate DataType="{x:Type local:ManagerObject}"
ItemsSource="{Binding MyManager}"> <!-- Look here -->
<TextBlock Text="{Binding Id}"/>
</HierarchicalDataTemplate>
You are trying to data bind the MyManager property to the HierarchicalDataTemplate.ItemsSource property, but you can't because it is not a collection. Instead, try this:
<DataTemplate DataType="{x:Type local:ManagerObject}">
<StackPanel>
<TextBlock Text="{Binding Id}" />
<ContentControl Content="{Binding MyManager}" />
</StackPanel>
</DataTemplate>
You'll have other problems like this too, so you'll have to adjust a number of your templates. For example, this won't work because the ManagerClientServerProperty property is not a collection:
<HierarchicalDataTemplate DataType="{x:Type local:Manager}"
ItemsSource="{Binding ManagerClientServerProperty}">
...
</HierarchicalDataTemplate>
You could do this:
<HierarchicalDataTemplate DataType="{x:Type local:Manager}"
ItemsSource="{Binding ManagerClientServerProperty.Clients}">
...
</HierarchicalDataTemplate>
... but then that would only be one of the collections. When writing WPF, I've learned that it's always best to make your data the right shape to fit your UI. Usually, that just means adding a few extra properties here and there to make your job displaying it easier. For example, instead of using a CompositeCollection in the UI, you could just add an extra property to your ManagerClientServer class. Maybe something like this:
public ObservableCollection<NetworkObject> NetworkObjects
{
get
{
hhh networkObjects = new ObservableCollection<NetworkObject>(Clients);
networkObjects.Add(Servers);
return networkObjects;
}
}
Then you could do this:
<HierarchicalDataTemplate DataType="{x:Type local:Manager}"
ItemsSource="{Binding ManagerClientServerProperty.NetworkObjects}">
...
</HierarchicalDataTemplate>
Anyway, I guess you get the picture now, so I trust that you can finish the rest on your own. Oh, one last thing... don't be surprised if it won't work, because your data is not in the correct 'shape' that a TreeView expects. It might work, but if not, forget the HierarchicalDataTemplates and just define ListBoxes in DataTemplates to bind to the inner collections.
I'm looking for a simple way to sort items of ItemsControl based on a property specified in implicit DataTemplate for the items to which the control is bound. And defining the properties on DataTemplate is crucial here, because I cannot add the sorting property on the item itself.
So, for the below example VM layer:
public interface INamed
{
string Name { get; set; }
}
public class FirstModel : INamed
{
public string Name { get; set; }
}
public class SecondModel : INamed
{
public string Name { get; set; }
}
public class ViewModel
{
public ViewModel()
{
Models = new INamed[] { new SecondModel {Name = "Second"}, new FirstModel {Name = "First"}};
}
public IEnumerable<INamed> Models { get; private set; }
}
and this attached property:
public static class AttachedProperties
{
public static int GetSortOrder(DependencyObject obj)
{
return (int)obj.GetValue(SortOrderProperty);
}
public static void SetSortOrder(DependencyObject obj, int value)
{
obj.SetValue(SortOrderProperty, value);
}
public static readonly DependencyProperty SortOrderProperty =
DependencyProperty.RegisterAttached("SortOrder", typeof(int), typeof(AttachedProperties), new PropertyMetadata(0));
}
I have the following DataTemplate definitions (over-simplified):
<DataTemplate DataType="{x:Type local:FirstModel}">
<StackPanel Background="Red" local:AttachedProperties.SortOrder="1">
<Label>First's Name:</Label>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type local:SecondModel}">
<StackPanel Background="Green" local:AttachedProperties.SortOrder="2">
<Label>Second's Name:</Label>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
Somewhere the usage will be like:
<ItemsControl ItemsSource="{Binding Models}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
And here the order of the items should be based on the attached property I defined for the data templates. Don't see any option to use the CollectionViewSource directly here, may be I'm wrong...
Current options I see, none too appealing, are:
Attached behavior on the ItemsControl, traversing the visual tree of each new item and sorting the Items in accordance with the found SortOrder value
A custom ItemsControl with it's own sorting logic, panel, blackjack and... you know
Wrapping the model instances in some kind of proxy with SortOrder property on it. Which still requires some custom/user control code-behind or ViewModel class changes
Is there some better/easier way I miss?
I guess you cant
I think the only way is to implement your own ItemsControl
Or wrap the models with another class
Maybe this helps:
SortDescription with custom attached property