In WPF, Selecting ItemContainerStyle based on data bound content - wpf

In #WPF you have ItemTemplateSelectors. But, can you also select an ItemContainerStyle based on the datatype of a bound object?
I am databinding a scatterview. I want to set some properties of the generated ScatterViewItems based on the object in their DataContext. A mechanism similar to ItemTemplateSelector for styles would be great. Is that at all possible? I am now binding to properties in the objects that I am displaying to get the effect, but that feels like overhead and too complex (and most importantly, something that our XU designers can't do by themselves).
This is the XAML that I am using now. Your help is greatly appreciated.
<s:ScatterView x:Name="topicsViewer">
<s:ScatterView.ItemTemplateSelector>
<local:TopicViewerDataTemplateSelector>
<DataTemplate DataType="{x:Type mvc:S7VideoTopic}">
<Grid>
<ContentPresenter Content="{Binding MediaElement}" />
<s:SurfaceButton Visibility="{Binding MailToVisible}" x:Name="mailto" Tag="{Binding Titel}" Click="mailto_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" Width="62" Height="36">
<Image Source="/Resources/MailTo.png" />
</s:SurfaceButton>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="32">
<s:SurfaceButton Tag="{Binding MediaElement}" x:Name="btnPlay" Click="btnPlay_Click">
<Image Source="/Resources/control_play.png" />
</s:SurfaceButton>
<s:SurfaceButton Tag="{Binding MediaElement}" x:Name="btnPause" Click="btnPause_Click">
<Image Source="/Resources/control_pause.png" />
</s:SurfaceButton>
<s:SurfaceButton Tag="{Binding MediaElement}" x:Name="btnStop" Click="btnStop_Click">
<Image Source="/Resources/control_stop.png" />
</s:SurfaceButton>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type mvc:S7ImageTopic}">
<Grid>
<ContentPresenter Content="{Binding Resource}" />
<s:SurfaceButton Visibility="{Binding MailToVisible}" x:Name="mailto" Tag="{Binding Titel}" Click="mailto_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" Width="62" Height="36">
<Image Source="/Resources/MailTo.png" />
</s:SurfaceButton>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Kassa}">
<ContentPresenter Content="{Binding}" Width="300" Height="355" />
</DataTemplate>
</local:TopicViewerDataTemplateSelector>
</s:ScatterView.ItemTemplateSelector>
<s:ScatterView.ItemContainerStyle>
<Style TargetType="s:ScatterViewItem">
<Setter Property="MinWidth" Value="200" />
<Setter Property="MinHeight" Value="150" />
<Setter Property="MaxWidth" Value="800" />
<Setter Property="MaxHeight" Value="700" />
<Setter Property="Width" Value="{Binding DefaultWidth}" />
<Setter Property="Height" Value="{Binding DefaultHeight}" />
<Setter Property="s:ScatterViewItem.CanMove" Value="{Binding CanMove}" />
<Setter Property="s:ScatterViewItem.CanScale" Value="{Binding CanScale}" />
<Setter Property="s:ScatterViewItem.CanRotate" Value="{Binding CanRotate}" />
<Setter Property="Background" Value="Transparent" />
</Style>
</s:ScatterView.ItemContainerStyle>
</s:ScatterView>
Bart Roozendaal, Sevensteps

How about using a ItemContainerStyleSelector (duh!)... Sorry, it's been a long night

Related

Handling different item templates that share the same content

I have two custom ItemTemplates for the ListBox, one for the regular items, and one for the selected item. An example of how would I handle this is:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContentTemplate" Value="{StaticResource Template1}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource Template2}" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
Template1 and Template2 are very similar:
<DataTemplate x:Key="Template1">
<SameContent />
<DifferentContent1 />
</DataTemplate>
<DataTemplate x:Key="Template2">
<SameContent />
<DifferentContent2 />
</DataTemplate>
So, is it a proper way to duplicate the code for the SameContent (which is like a bunch of TextBlocks, Panels, etc) in both templates, or it is a better approach to have only one template, but switch the DifferentContent based on the IsSelected property, or...?
if second approach, how would it be properly done?
Obviously duplicating the code is not a very good solution. A better approach is to define another DataTemplate as your common content and then use ContentPresenter to present it:
<Window.Resources>
<DataTemplate x:Key="CommonTemplate">
<TextBlock Text="{Binding CommonProperty1}" />
<TextBlock Text="{Binding CommonProperty2}" />
</DataTemplate>
<DataTemplate x:Key="Template1" >
<StackPanel>
<ContentPresenter ContentTemplate="{StaticResource CommonTemplate}"/>
<TextBlock Text="{Binding Template1Property1}"/>
<TextBlock Text="{Binding Template1Property2}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="Template2" >
<StackPanel>
<ContentPresenter ContentTemplate="{StaticResource CommonTemplate}"/>
<TextBlock Text="{Binding Template2Property1}"/>
<TextBlock Text="{Binding Template2Property2}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>

WPF Surface listbox data binding - listbox content not being populated with content

I was using XmlDataProvider to get pictures from a folder, then display them in a list box, but something is wrong that list box appears but without those pictures. Pictures are in a folder called Resources in the project directory.
here are the codes, xmldata part:
<!-- List content -->
<XmlDataProvider x:Key="tri" XPath="Root">
<x:XData>
<Root xmlns="">
<Entry Name="Cone" Image="\Resources\cone.jpg" />
<Entry Name="Cube" Image="\Resources\cube.jpg" />
<Entry Name="Cylinder" Image="\Resources\cylinder.jpg" />
<Entry Name="Icosahedron" Image="\Resources\icosahedron.jpg" />
<Entry Name="Octahedron" Image="\Resources\octahedron.jpg" />
<Entry Name="Sphere" Image="\Resources\sphere.jpg" />
<Entry Name="Torus" Image="\Resources\torus.jpg" />
<Entry Name="YinYang" Image="\Resources\yinyang.jpg" />
</Root>
</x:XData>
</XmlDataProvider>
then the listbox part:
<s:SurfaceListBox x:Name="triList" Grid.Row="1"
s:SurfaceDragDrop.DragCompleted="OntriListDragCompleted"
s:SurfaceDragDrop.DragCanceled="OntriListDragCanceled"
PreviewMouseLeftButtonDown="OntriListPreviewMouseLeftButtonDown"
PreviewMouseMove="OntriListPreviewMouseMove"
PreviewMouseLeftButtonUp="OntriListPreviewMouseLeftButtonUp"
ItemsSource="{Binding Source={StaticResource tri}, XPath=Entry}"
Style="{StaticResource triListStyle}"
PreviewTouchDown="OntriListPreviewTouchDown"
PreviewTouchMove="OntriListPreviewTouchMove"
PreviewTouchUp="OntriListPreviewTouchUp" Height="234" VerticalAlignment="Top" Visibility="Visible" ItemsPanel="{Binding}" AllowDrop="False" />
the list style:
<Style x:Key="triListStyle" TargetType="{x:Type s:SurfaceListBox }">
<Setter Property="Background" Value="{DynamicResource {x:Static s:SurfaceColors.ListBoxItemBackgroundBrushKey}}" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="Height" Value="234" />
<Setter Property="ItemTemplateSelector">
<Setter.Value>
<sc:triListTemplateSelector>
<sc:triListTemplateSelector.NormalItemTemplate>
<DataTemplate >
<StackPanel RenderTransformOrigin="0.5, 0.5"
Margin="7,0,0,0"
MinWidth="171" MaxWidth="171"
MinHeight="235" MaxHeight="235">
<Image Margin="14,21,21,11" Source="{Binding XPath=#Image}"
Height="149" Width="101" />
<TextBlock Text="{Binding XPath=#Name}"
MaxWidth="116"
FontSize="12"
Margin="21,0,21,21"
FontFamily="Segoe360"
TextAlignment="Center"
TextWrapping="Wrap"
Foreground="{DynamicResource {x:Static s:SurfaceColors.ListBoxItemForegroundBrushKey}}"
HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</sc:triListTemplateSelector.NormalItemTemplate>
<sc:triListTemplateSelector.StartingItemTemplate>
<DataTemplate>
<Grid Margin="17, 0, 0, -14">
<StackPanel RenderTransformOrigin="0.5, 0.5"
Margin="7,0,0,0"
MinWidth="171" MaxWidth="171"
MinHeight="235" MaxHeight="235">
<Image Margin="14,21,21,11"
Source="{Binding XPath=#Image}"
Height="149"
Width="101" />
<TextBlock Text="{Binding XPath=#Name}"
MaxWidth="116"
FontSize="12"
Margin="21,0,21,21"
FontFamily="Segoe360"
TextAlignment="Center"
TextWrapping="Wrap"
Foreground="{DynamicResource {x:Static s:SurfaceColors.ListBoxItemForegroundBrushKey}}"
HorizontalAlignment="Center" />
</StackPanel>
<Rectangle Fill="{DynamicResource {x:Static s:SurfaceColors.SurfaceWindowBackgroundBrushKey}}"
Width="17" HorizontalAlignment="Left" Margin="-26,-2.5,0,3" />
</Grid>
</DataTemplate>
</sc:triListTemplateSelector.StartingItemTemplate>
</sc:triListTemplateSelector>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<s:SurfaceScrollViewer Background="{TemplateBinding Background}"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Hidden"
CanContentScroll="True">
<!--<sc:LoopingPanel IsItemsHost="True" /> -->
</s:SurfaceScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
can you help me to find out the problem?
Don't know why you need the XmlDataProvider stuff for showing some images in a ListBox, but what you need is a DataTemplate with an Image control that actually visualizes each image:
<DataTemplate x:Key="imageTemplate">
<Image Source="{Binding XPath=#Image}"/>
</DataTemplate>
You would use that in your ListBox by setting the ItemTemplate property:
<s:SurfaceListBox ... ItemTemplate="{StaticResource imageTemplate}"/>
Also make sure that the Build Action is set to Resource for the image files in your Visual Studio project.

Silverlight vs WPF - Treeview with HierarchialDataTemplate

So, the following is easy enough in WPF, but how would you do it in Silverlight?
Please note that the trick here is to display both Groups, and Entries on the same level.
Additonally you dont know how deep the entries are nested, they might be on the first, or the nth level.
This is hard in Silverlight because you lack the DataType="{x:Type local:Group}" property in the H.DataTemplate (or any DataTemplate). Building my own custom DataTempalteSelector also didnt work, because the Hierarchial ItemsSource gets lost. (Which just gave me a new idea which I will investigate shortly)
Example:
Group1
--Entry
--Entry
Group2
--Group4
----Group1
------Entry
------Entry
----Entry
----Entry
--Entry
--Entry
Group3
--Entry
--Entry
Your Classes:
public class Entry
{
public int Key { get; set; }
public string Name { get; set; }
}
public class Group
{
public int Key { get; set; }
public string Name { get; set; }
public IList<Group> SubGroups { get; set; }
public IList<Entry> Entries { get; set; }
}
Your xaml:
<TreeView Name="GroupView" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Group}" ItemsSource={Binding Items}">
<TextBlock Text="{Binding Path=Name}" />
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Entry}" >
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</TreeView.Resources>
</TreeView>
The TreeView control from the Silverlight toolkit supports hierarchical data templates.
Check out this article for sample usage, but it looks identical to me to the WPF built in one.
You can download the Silverlight toolkit here.
Here is an example of using the HierarchicalDataTemplate with a HeaderedItemsControl in Silverlight (Songhay.Silverlight.BiggestBox.Views.ClientView.xaml):
<UserControl x:Class="Songhay.Silverlight.BiggestBox.Views.ClientView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
xmlns:sdk="clr-namespace:System.Windows;assembly=System.Windows.Controls"
xmlns:sdkctrls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
xmlns:v="clr-namespace:Songhay.Silverlight.BiggestBox.Views"
xmlns:m="clr-namespace:Songhay.Silverlight.BiggestBox.ViewModels">
<UserControl.Resources>
<Style x:Key="StackPanelRoot" TargetType="StackPanel">
<Setter Property="Background" Value="Seashell" />
<Setter Property="Height" Value="598" />
<Setter Property="Width" Value="1024" />
</Style>
<Style x:Key="GridRoot" TargetType="Grid">
<Setter Property="Height" Value="570" />
</Style>
<Style x:Key="ClientGridSplitter" TargetType="sdkctrls:GridSplitter">
<Setter Property="Background" Value="#FFE0EEE0" />
<Setter Property="Height" Value="8" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
<m:ClientViewModel x:Key="ClientViewModelDataSource" d:IsDataSource="True"/>
<Style TargetType="sdkctrls:HeaderedItemsControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdkctrls:HeaderedItemsControl">
<StackPanel>
<ItemsPresenter Margin="10,0,0,0" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollViewerIndexItems" TargetType="ScrollViewer">
<Setter Property="Margin" Value="10" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
</Style>
<Style x:Key="StackPanelIndexItems" TargetType="StackPanel">
<Setter Property="Background" Value="#ff9" />
<Setter Property="Orientation" Value="Horizontal" />
</Style>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource ClientViewModelDataSource}"/>
</UserControl.DataContext>
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center">
<StackPanel x:Name="RootPanel" Style="{StaticResource StackPanelRoot}">
<Grid Style="{StaticResource GridRoot}">
<Grid.RowDefinitions>
<RowDefinition MinHeight="128" MaxHeight="360" Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1.5*" />
</Grid.RowDefinitions>
<v:HeaderView Grid.Row="0" />
<sdkctrls:GridSplitter Grid.Row="1" Style="{StaticResource ClientGridSplitter}" />
<StackPanel Grid.Row="2"
Orientation="Horizontal"
Style="{StaticResource StackPanelIndexItems}">
<ScrollViewer Style="{StaticResource ScrollViewerIndexItems}">
<sdkctrls:HeaderedItemsControl
Header="{Binding IndexTitle}"
ItemsSource="{Binding Outlines}">
<sdkctrls:HeaderedItemsControl.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="24" FontWeight="Bold" Text="{Binding}" />
</DataTemplate>
</sdkctrls:HeaderedItemsControl.HeaderTemplate>
<sdkctrls:HeaderedItemsControl.ItemTemplate>
<sdk:HierarchicalDataTemplate>
<StackPanel>
<TextBlock FontSize="12" FontWeight="Bold" Margin="0,10,0,0" Text="{Binding Text}" />
<sdkctrls:HeaderedItemsControl ItemsSource="{Binding Outlines}" Margin="10,0,10,0">
<sdkctrls:HeaderedItemsControl.ItemTemplate>
<sdk:HierarchicalDataTemplate>
<HyperlinkButton
ClickMode="Press"
Command="{Binding IndexItemCommand, Source={StaticResource ClientViewModelDataSource}}"
CommandParameter="{Binding Url}"
FontSize="12">
<HyperlinkButton.Content>
<TextBlock Text="{Binding Text}" />
</HyperlinkButton.Content>
</HyperlinkButton>
</sdk:HierarchicalDataTemplate>
</sdkctrls:HeaderedItemsControl.ItemTemplate>
</sdkctrls:HeaderedItemsControl>
</StackPanel>
</sdk:HierarchicalDataTemplate>
</sdkctrls:HeaderedItemsControl.ItemTemplate>
</sdkctrls:HeaderedItemsControl>
</ScrollViewer>
<navigation:Frame x:Name="IndexFrame" Width="685">
</navigation:Frame>
</StackPanel>
</Grid>
<v:FooterView Height="30" />
</StackPanel>
</Border>
</UserControl>

Bind rectangle fill to a value

<UserControl.Resources>
<DataTemplate x:Key="MyCustomTemplate">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=ID}"/>
<Rectangle Height="18" Width="20" />
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListBox x:Name="userListBox" Margin="10"/>
</Grid>
Code behind:
userListbox.ItemsSource = myservice.getvalue();
Now how do I bind the rectangle color. The getValue return a list of Objects whose one member is integer and I have to use that value to decide the color of rectangle.
Say if object.item = 1 color = green
object.item=2 color = red
Use ValueConverter, info here:
http://blogs.msdn.com/b/bencon/archive/2006/05/10/594886.aspx
you can use data trigger to achieve that, example:
<DataTemplate x:Key="MyCustomTemplate">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=ID}"/>
<Rectangle x:Name="rect" Height="18" Width="20" />
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=object.item}" Value="1">
<Setter TargetName="rect" Property="Fill" Value="Green"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=object.item}" Value="2">
<Setter TargetName="rect" Property="Fill" Value="Red"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
and then bind the value for the templated control to selected item of the listbox
<Label ContentTemplate="{DynamicResource MyCustomTemplate}" Grid.Column="2" Content="{Binding ElementName=userListBox, Path=SelectedItem}"/>
or if the datatemplate is actually for the listbox, then you can do it this way:
<ListBox x:Name="userListBox" Margin="10" ItemTemplate="{DynamicResource MyCustomTemplate}" />

WPF Tooltip Binding

I am only two weeks into WPF so this is probably a trivial question. I have a collection "CellList" which has a few properties I would like to bind to a ToolTip so when I hover over a label information from the current instance of CellList is displayed. How do I do that? I understand simple binding and this maybe simple binding too but I can't wrap my head around it. Below is my XAML for the label. Could someone explain to me how I can accomplish this.
<HierarchicalDataTemplate>
<ListBox ItemsSource="{Binding CellList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content=" " Height="20" Width="15" Background="{Binding Path=ExptNameBkg, Converter={StaticResource ExptNameToBrushConverter}}" BorderBrush="Black" BorderThickness="1" >
</Label>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</HierarchicalDataTemplate>
Thanks.
The tricky thing about ToolTips is that a ToolTip is an object you associate with a control, and not part of the control's visual tree. So you can't populate it the way you'd populate things in the visual tree, e.g.:
<TextBox.ToolTip>
<StackPanel>
...put bound controls here
</StackPanel>
</TextBox.ToolTip>
Instead, what you have to do is create a specific instance of a ToolTip, and assign it a style that sets its DataContext (very important; that's how you can bind to the properties of the data source of its "placement target," i.e. the control that's displaying the tooltip) and its Template. Then put the visual tree of the ToolTip, including bindings, into the template. Finally, reference the ToolTip in your control.
So, here's a TextBox whose Binding does validation:
<TextBox ToolTip="{StaticResource ErrorToolTip}">
<TextBox.Text>
<Binding Source="SourceProperty">
<Binding.ValidationRules>
<DataErrorValidationRule/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
It uses this ToolTip:
<ToolTip x:Key="ErrorToolTip" Style="{StaticResource ErrorToolTipStyle}"/>
And the ToolTip uses this style, which gets its content from the ValidationError property of the TextBox's binding source:
<Style x:Key="ErrorToolTipStyle" TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="HasDropShadow" Value="True"/>
<Setter Property="DataContext" Value="{Binding Path=PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border
Name="Border"
BorderThickness="1"
BorderBrush="LightGray">
<StackPanel Orientation="Vertical">
<Label Background="Firebrick" Foreground="White" FontWeight="Bold" Margin="4">Validation error</Label>
<TextBlock Margin="10" Text="{Binding ValidationError}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="true">
<Setter TargetName="Border" Property="CornerRadius" Value="4"/>
<Setter TargetName="Border" Property="SnapsToDevicePixels" Value="true"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm not certain of this, but I think that the only part of the above that actually has to be set in the style is the DataTrigger setting the DataContext; I think most everything else could just be explicitly set in the ToolTip's visual tree. But I'm probably not thinking of something important.
<Label Content={Binding Path=Id} ToolTip={Binding Path=Name}/>
just try this
Here's a kaxaml-ready example that includes a tooltip that is a little more elaborate than just text:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<XmlDataProvider x:Key="CharacterData">
<x:XData>
<Data xmlns="">
<Character First="Bart" Last="Simpson" Background="LightGreen" />
<Character First="Homer" Last="Simpson" Background="LightBlue" />
<Character First="Lisa" Last="Simpson" Background="Pink" />
<Character First="Maggie" Last="Simpson" Background="Yellow" />
<Character First="Marge" Last="Simpson" Background="PapayaWhip" />
</Data>
</x:XData>
</XmlDataProvider>
<ToolTip x:Key="ElaborateToolTip">
<Grid Margin="5">
<Rectangle RadiusX="6" RadiusY="6" Fill="{Binding XPath=#Background}" />
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="{Binding XPath=#First}" Margin="0,0,6,0" />
<TextBlock Text="{Binding XPath=#Last}" />
</StackPanel>
</Grid>
</ToolTip>
</Page.Resources>
<ListBox ItemsSource="{Binding Source={StaticResource CharacterData}, XPath=Data/Character}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="ToolTip" Value="{StaticResource ElaborateToolTip}" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding XPath=#First}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Page>

Resources