TreeView in a DataTemplate to display an object containing object references
Some objects contain other objects and it's properties. Displaying these objects is often dificult.
A DataTemplate with a TreeView can do this.
We will use an example of a Customer object with several Address objects as properties of the customer.
Create a DataTemplate for this object in a ResourceDirectory file.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Customer="clr-namespace:MyNamespace;assembly=MyNamespace">
<DataTemplate DataType="{x:Type Customer:MyCustomerObject}" x:Key="CustomerObject">
<TreeViewItem IsExpanded="True">
<TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<Label >Customer (ID): (</Label>
<Label Width="100" Content="{Binding Id}"/>
<Label >) </Label>
<Label Content="{Binding LastName}"/>
<Label >, </Label>
<Label Content="{Binding FirstName}"/>
</StackPanel>
</TreeViewItem.Header>
<TreeViewItem.Items>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Email: " />
<Label Content=" " />
<Label Content="{Binding Email}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Mobile Phone: " />
<Label Content=" " />
<Label Content="{Binding MobilePhone}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Work Phone: " />
<Label Content=" " />
<Label Content="{Binding WorkPhone}"/>
</StackPanel>
</StackPanel>
<!-- Address 1 -->
<TreeViewItem ItemsSource="{Binding Address1}" IsExpanded="True">
<TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<Label Content="Home Address:"/>
</StackPanel>
</TreeViewItem.Header>
<TreeViewItem.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Street}" />
<Label Content=" " />
<Label Content="{Binding StreetNumber}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding City}"/>
<Label Content=" " />
<Label Content="{Binding PostCode}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Country}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</TreeViewItem.ItemTemplate>
</TreeViewItem>
<!-- Address 2 -->
<TreeViewItem ItemsSource="{Binding Address2}" IsExpanded="True">
<TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<Label Content="Work Address:"/>
</StackPanel>
</TreeViewItem.Header>
<TreeViewItem.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Street}" />
<Label Content=" " />
<Label Content="{Binding StreetNumber}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding City}"/>
<Label Content=" " />
<Label Content="{Binding PostCode}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Country}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</TreeViewItem.ItemTemplate>
</TreeViewItem>
</TreeViewItem.Items>
</TreeViewItem>
</DataTemplate>
The Customer and Address objects would look something like this:
class MyCustomerObject
{
public string Name { get; set; }
public string Email { get; set; }
public string MobilePhone { get; set; }
public string WorkPhone { get; set; }
public MyAddress Address1 { get; set; }
public MyAddress Address2 { get; set; }
}
class MyAddress
{
public string Street { get; set; }
public string StreetNumber { get; set; }
public string City { get; set; }
public string PostCode { get; set; }
public string Country { get; set; }
}
You can set the DataTemplate for the object in code using the ContentTemplate property:
ScrollViewer sv = new ScrollViewer();
sv.ContentTemplate = FindResource("CustomerObject") as DataTemplate;
sv.Content = customer;
For the resource to be found, you have to specify it's location in either the App.xaml or the page where it is used:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/CustomerTemplate.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Transparent background in a DataTemplate
Pretend you have a ListBox. Instead of assigning ListBoxItems to the list box, you assign a list of objects to it.
When doing so, you must create a DataTemplate for the object so WPF knows how to display the object.
Here is a data template for 'MyObject'. It will display the person's name as 'LastName, FirstName'
<DataTemplate DataType="{x:Type common:MyObject}">
<Grid Margin="5" x:Name="myObjectPresenter" Background="Transparent" >
<StackPanel Orientation="Horizontal">
<Label Content="{Binding LastName}" Margin="0"></Label>
<Label Content=", " Margin="0"></Label>
<Label Content="{Binding FirstName}" Margin="0"/>
</StackPanel>
</Grid>
</DataTemplate>
Without the transparent background property in the grid, only the text in the ListBox will be clickable. The empty white space around the text will not respond to IsMouseOver or clicking. A background of some sort is required for the mouse to click on or hover ober.
The Background="Transparent" property give the mouse that place to click on without changing the appearance.