HierarchicalDataTemplate doesn’t show any children - why not? - wpf

I am trying the absolute simplest use of HierarchicalDataTemplate to bind nested data to a WPF TreeView. For some reason, the children of my tree are not visible:
Here is the entire XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<TreeView Name="ctTree">
<TreeView.Resources>
<HierarchicalDataTemplate DataType = "{x:Type src:MyClass}"
ItemsSource = "{Binding Path=Children}">
<TextBlock Text="{Binding Path=Name}"/>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
</Window>
and here’s all of C# behind this, apart from usings and the namespace:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var collection = new ObservableCollection<MyClass>
{
new MyClass { Name = "parent one" },
new MyClass { Name = "parent two" },
};
collection[0].Children.Add(new MyClass { Name = "child one" });
collection[0].Children.Add(new MyClass { Name = "child two" });
ctTree.ItemsSource = collection;
}
}
class MyClass
{
public string Name { get; set; }
public ObservableCollection<MyClass> Children
= new ObservableCollection<MyClass>();
}
Note that the data template does actually apply to the items: the data is taken from the Name property, and if the template didn’t apply would show as "MyClass" instead.
How do I get the children to show? I seem to be doing exactly the same thing as all examples on HierarchicalDataTemplate.

MyClass.Children is a field, not a property. You cannot bind to a field, convert Children field to a property and everything should work then:
class MyClass
{
public string Name { get; set; }
public ObservableCollection<MyClass> Children { get; private set; }
public MyClass()
{
Children = new ObservableCollection<MyClass>();
}
}

I think Treeview.Resources is the wrong place for that. You want to put your template in Treeview.ItemTemplate.

Related

WPF binding DataGrid to CollectionViewSource: working via DataContext, empty via ItemsSource; difference?

Consider the following XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:WpfApplication1"
DataContext="{Binding Source={x:Static c:ViewModel.Instance}}"
>
<Grid>
<DataGrid DataContext="{Binding ItemsViewSource}" ItemsSource="{Binding}" />
</Grid>
and the view model:
public class ItemViewModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
public class ViewModel
{
public static ViewModel Instance { get; set; }
static ViewModel()
{
Instance = new ViewModel();
}
public ObservableCollection<ItemViewModel> Items { get; private set; }
public CollectionViewSource ItemsViewSource { get; private set; }
public ViewModel()
{
Items = new ObservableCollection<ItemViewModel>();
ItemsViewSource = new CollectionViewSource() { Source = Items };
Items.Add(new ItemViewModel() { FirstName = "test", LastName = "test" });
}
}
This code is working, but if I change
<DataGrid DataContext="{Binding ItemsViewSource}" ItemsSource="{Binding}" />
to
<DataGrid ItemsSource="{Binding ItemsViewSource}" />`
DataGrid does not bind, it is empty.
What is the difference between these two bindings?
First of all for second option to work, you need to bind with CollectionViewSource.View property.
<DataGrid ItemsSource="{Binding ItemsViewSource.View}" />
When you bind DataContext of dataGrid to CollectionViewSource, dataGrid internally do value conversion from CollectionViewSource to ICollectionView (ListCollectionView in your case) but when you asked it explicitly to bind to CollectionViewSource, it doesn't do default value conversion. You can verify this by putting converter in your binding.

ComboBox does not select proper item when bound to CompositeCollection

I have a ComboBox bound to a collection of animals. From it I select my favourite animal. I need a static null item above the bound items. I declare it using a CompositeCollection. When the ComboBox is bound it does not select my initial favourite animal. How can I fix that? Similar problem here but still unresolved.
Observations:
Binding to the static item works i.e. if I don't have an initial favourite animal the static item gets selected.
The problem disappears if the static item is removed. Of course this would make the CompositeCollection and this whole question obsolete.
I already applied these measures:
A CollectionContainer cannot bind directly to a property as outlined here.
The composite collection is also moved to a static resource as suggested here.
Complete C# code and XAML to demonstrate the problem:
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication1
{
public class Animal
{
public int Id { get; set; }
public string Name { get; set; }
}
public class Zoo
{
private IEnumerable<Animal> _animals = new Animal[]
{
new Animal() { Id = 1, Name = "Tom" },
new Animal() { Id = 2, Name = "Jerry" }
};
public Zoo(int initialId)
{
FavouriteId = initialId;
}
public int FavouriteId { get; set; }
public IEnumerable<Animal> Animals { get { return _animals; } }
}
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void BindComboBox(object sender, RoutedEventArgs e)
{
// Selecting the static item by default works.
//DataContext = new Zoo(-1);
// Selecting "Jerry" by default does not work.
DataContext = new Zoo(2);
}
}
}
XAML
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1">
<Window.Resources>
<CollectionViewSource x:Key="AnimalsBridge" Source="{Binding Path=Animals}" />
<CompositeCollection x:Key="AnimalsWithNullItem">
<local:Animal Id="-1" Name="Pick someone..."/>
<CollectionContainer Collection="{Binding Source={StaticResource AnimalsBridge}}" />
</CompositeCollection>
</Window.Resources>
<StackPanel>
<Button Content="Bind" Click="BindComboBox"/>
<ComboBox x:Name="cmbFavourite"
SelectedValue="{Binding Path=FavouriteId}"
SelectedValuePath="Id" DisplayMemberPath="Name"
ItemsSource="{StaticResource AnimalsWithNullItem}"/>
</StackPanel>
</Window>
I dont have a solution to your problem but rather an alternative. I personally have view models dedicated to each view. I would then have a property on the view model to add the null value as required. I prever this method since it allows for better unit testing of my viewmodel.
For your example add:
public class ZooViewModel
{
.....
public IEnumerable<Animal> Animals { get { return _animals; } }
public IEnumerable<Animal> AnimalsWithNull { get { return _animals.WithDefault(new Animal() { Id = -1, Name = "Please select one" }); } }
}
The magic component
public static class EnumerableExtend {
public static IEnumerable<T> WithDefault<T>(this IEnumerable<T> enumerable,T defaultValue) {
yield return defaultValue;
foreach (var value in enumerable) {
yield return value;
}
}
}
Then in your XAML you just bind to
ComboBox x:Name="cmbFavourite"
SelectedValue="{Binding Path=FavouriteId}"
SelectedValuePath="Id" DisplayMemberPath="Name"
ItemsSource="{Binding AnimalsWithNull }"/>
Now you are binding directly to the source and can control the binding as normal. Also note because we are using "yield" we are not creating a new enum but rather just iterating over the existing list.

Control number of display buttons through binding

I wasn't sure the best way to word the title and couldn't find a related question, but if there is one then kindly direct me to it.
I'm trying to create a tender screen where the number of buttons displayed will be determined by how many types of tenders the user has setup (Cash, Check, Credit, Debit, Gift Card, etc).
So if I had a class like this:
public class TenderType
{
public string DisplayName { get; set; }
// ... other implementation details
}
And on my DataContext I have a TenderTypes collection declared like so:
public ObservableCollection<TenderType> TenderTypes { get; private set; }
Then how might I go about making my view udpate the number of buttons shown depending on how many TenderType instances are in the collection, and bind their Text properties to the DisplayName of the appropriate item in the collection?
You could use an ItemsControl and create a datatemplate for your TenderType to display a Button.
This way it will only show the buttons in your list
Xaml:
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication8"
Title="MainWindow" Height="105" Width="156" Name="UI">
<Window.Resources>
<DataTemplate DataType="{x:Type local:TenderType}">
<Button Content="{Binding DisplayName}" />
</DataTemplate>
</Window.Resources>
<Grid DataContext="{Binding ElementName=UI}">
<ItemsControl ItemsSource="{Binding TenderTypes}"/>
</Grid>
</Window>
Code:
public partial class MainWindow : Window
{
private ObservableCollection<TenderType> _sourceData = new ObservableCollection<TenderType>();
public MainWindow()
{
InitializeComponent();
TenderTypes.Add(new TenderType { DisplayName = "Stack" });
TenderTypes.Add(new TenderType { DisplayName = "Overflow" });
}
public ObservableCollection<TenderType> TenderTypes
{
get { return _sourceData; }
set { _sourceData = value; }
}
}
public class TenderType
{
public string DisplayName { get; set; }
}
Result:

Binding recursively in a WPF TreeView

I am trying to bind recursively to the children of an item in a TreeView. From what I can see on MSDN HierarchicalDataTemplate is the way to go, but thus far I've only been partially successful.
My class:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DocumentText test = new DocumentText();
this.DataContext = test;
for (int i = 1; i < 5; i++)
{
test.AddChild();
}
foreach (DocumentText t in test.Children)
{
t.AddChild();
t.AddChild();
}
}
}
partial class DocumentText
{
private string _name;
public string Name
{
get { return _name; }
set { _name = value; }
}
public override string ToString()
{
return Name;
}
public List<DocumentText> _children;
public List<DocumentText> Children
{
get { return this._children; }
}
public DocumentText()
{
_name = "Test";
_children = new List<DocumentText>();
}
public void AddChild()
{
_children.Add(new DocumentText());
}
}
My XAML:
In mainview.xaml:
<Window x:Class="treetest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TreeView Name="binderPanel" DockPanel.Dock="Left"
MinWidth="150" MaxWidth="250" Background="LightGray"
ItemsSource="{Binding Children}">
</TreeView>
</Grid>
</Window>
In app.xaml:
<HierarchicalDataTemplate x:Key="BinderTemplate"
DataType="{x:Type src:DocumentText}" ItemsSource="{Binding Path=/Children}">
<TreeViewItem Header="{Binding}"/>
</HierarchicalDataTemplate>
This code produces a list of the first children, but the nested children are not displayed.
The primary problem in what you posted is that you haven't connected the HierarchicalDataTemplate as the TreeView's ItemTemplate. You need to either set ItemTemplate="{StaticResource BinderTemplate}" or remove the x:Key to apply the template to all DocumentText instances. You should also change the TreeViewItem in the template to a TextBlock - the TreeViewItem is generated for you and what you put in that template is applied to it as a HeaderTemplate.

Binding to a property of of the SelectedItem Property

I am currently experimenting with WPF.
One thing, I wanted to do was a master to detail selection over multiple comboboxes.
I have a ViewModel with GroupItems that i use as ItemSource for the first combobox. These GroupItems have a Property called Childs, which includes a List of items that belong to this group.
I can't find a way to bind the comboBox1.SelectedItem.Childs as Itemsource for the second comboBox.
Right now I only got to
ItemsSource="{Binding ElementName=comboBox1, Path=SelectedItem}"
But I don't get the Property of the SelectedItem. How can this be done? Or is this not the WPF way to this?
Is there any good website to learn how to select different elements? Eplaining Path, XPath, Source and everything?
Thanks for any help.
Your binding above isn't attempting to bind to Childs, only SelectedItem.
Try something like this:
Window1.xaml
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<ComboBox x:Name="_groups" ItemsSource="{Binding Groups}" DisplayMemberPath="Name"/>
<ComboBox ItemsSource="{Binding SelectedItem.Items, ElementName=_groups}"/>
</StackPanel>
</Window>
Window1.xaml.cs
using System.Windows;
namespace WpfApplication5 {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
var model = new ViewModel();
var g1 = new Group { Name = "Group1" };
g1._items.Add("G1C1");
g1._items.Add("G1C2");
g1._items.Add("G1C3");
model._groups.Add(g1);
var g2 = new Group { Name = "Group2" };
g2._items.Add("G2C1");
g2._items.Add("G2C2");
g2._items.Add("G2C3");
model._groups.Add(g2);
var g3 = new Group { Name = "Group3" };
g3._items.Add("G3C1");
g3._items.Add("G3C2");
g3._items.Add("G3C3");
model._groups.Add(g3);
DataContext = model;
}
}
}
ViewModel.cs
using System;
using System.Collections.Generic;
namespace WpfApplication5
{
public class Group {
internal List<String> _items = new List<string>();
public IEnumerable<String> Items {
get { return _items; }
}
public String Name { get; set; }
}
public class ViewModel
{
internal List<Group> _groups = new List<Group>();
public IEnumerable<Group> Groups
{
get { return _groups; }
}
}
}

Resources