Question

I would like to set in Silverlight for each item in a ListBox a tooltip with many rows.

In XAML i have a listbox and a button:

<ListBox Height="100" HorizontalAlignment="Left" Margin="24,136,0,0" Name="listBox1" VerticalAlignment="Top" Width="109" ItemsSource="{Binding}">
<Button Content="Add"  Name="button_add" VerticalAlignment="Top" Width="118" Click="add_Click">

in c#

private void button_add_Click(object sender, RoutedEventArgs e)
    {
        ObservableCollection<Person> obs1 = new ObservableCollection<Person>();
        obs1.Add(new Person(){Name="Name1", Age=1});
        obs1.Add(new Person(){Name="Name2", Age=2});
        listBox1.ItemsSource = obs1;
        // This Line of Code MUST NOT BE USED!! listBox1.DisplayMemberPath = "Name";          
    }
public class Person
{
    public String Name { get; set; }
    public int Age { get; set; }

    public override string ToString()
    {
        return Name;
    }
}

I would like to show for each item the Age as my tooltip.

Edit: Ok, this is the Solution for showing only AGE as tooltip. That is one Line/Row.

                <ListBox Height="100" HorizontalAlignment="Left" Margin="24,136,0,0" Name="listBox1" VerticalAlignment="Top" Width="109" ItemsSource="{Binding}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                                <TextBlock Text="{Binding Name}" ToolTipService.ToolTip="{Binding Age}"/>
                            </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

But what if i want to show a Tooltip with 2 Lines? something like:

 Name: Name1
 Age: 1

Edit: 3 rows, 2 columns. i also added public String Comment { set; get; } to class Person

                    <ListBox Height="100" HorizontalAlignment="Left" Margin="24,136,0,0" Name="listBox1" VerticalAlignment="Top" Width="109" ItemsSource="{Binding}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <ToolTipService.ToolTip>
                                    <ToolTip>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="20"></RowDefinition>
                                                <RowDefinition Height="20"></RowDefinition>
                                                <RowDefinition Height="40"></RowDefinition>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="80"/>
                                                <ColumnDefinition Width="250"/>

                                            </Grid.ColumnDefinitions>
                                            <TextBlock Text="Name: " Grid.Row="0" Grid.Column="0" />
                                            <TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
                                            <TextBlock Text="Age: " Grid.Row="1" Grid.Column="0"/>
                                            <TextBlock Text="{Binding Age}" Grid.Row="1" Grid.Column="1"/>
                                            <TextBlock Text="Comment: " Grid.Row="2" Grid.Column="0"/>
                                            <TextBlock Text="{Binding Comment}" Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" />
                                        </Grid>
                                    </ToolTip>
                                </ToolTipService.ToolTip>
                                <TextBlock Text="{Binding Name}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

But there is stil a problem. The comment can be short or long, so i would like to make the ROWS/LINES/SPACE for Comment to be variable or else Text is cut off.

Answer 1

You can use any controls for tooltip content:

<ToolTipService.ToolTip>
    <StackPanel Orientation="Vertical">
        <TextBlock Text="{Binding Name}" />
        <TextBlock Text="{Binding Age}" />
    </StackPanel>
</ToolTipService.ToolTip>

Other possibility would be to use a converter, that returns the Name and Age separated by \r\n.