Posted by: Zeeshan Amjad | June 28, 2011

Different tooltip for each item


I came across a question that how to display different tooltip on different item. We can do this with the help of DataTemplateSelector class and apply data template conditionally. Suppose we have a customer class defined something like this.

Code Snippet
class Customer
{
    public Customer(String name, String address, String phoneNo, String designation)
    {
        Name = name;
        Address = address;
        PhoneNo = phoneNo;
        Designation = designation;
    }

    public String Name
    { get; set; }

    public String Address
    { get; set; }

    public String PhoneNo
    { get; set; }

    public String Designation
    { get; set; }
}

 

There are two different types of customer, new customer and preferred customer. We can define our template selector class something like this.

Code Snippet
public class MyTemplateSelector : DataTemplateSelector
{
    public DataTemplate PreferredCustomerTemplate
    { get; set; }

    public DataTemplate NewCustomerTemplate
    { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Customer customer = item as Customer;

        if (customer != null)
        {
            if (customer.Designation == "Preferred")
                return PreferredCustomerTemplate;
            else if (customer.Designation == "New")
                return NewCustomerTemplate;
        }

        return base.SelectTemplate(item, container);
    }
}

 

We define two data template in XAML. One for each customer. Here is our XAML.

Code Snippet
<DataTemplate x:Key="PreferredTemplate">
    <TextBlock Text="{Binding Name}">
        <TextBlock.ToolTip>
            <Border Margin="2" BorderThickness="1" BorderBrush="Navy" CornerRadius="5">
                <Border.Background>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="AliceBlue"/>
                        <GradientStop Offset="1" Color="LightBlue"/>
                    </LinearGradientBrush>
                </Border.Background>
                <StackPanel Margin="3">
                    <TextBlock Text="{Binding Designation}" Foreground="DarkBlue" FontWeight="Bold" FontSize="14"/>
                    <TextBlock Text="{Binding PhoneNo}" Foreground="DarkBlue"/>
                </StackPanel>
            </Border>
        </TextBlock.ToolTip>
    </TextBlock>
</DataTemplate>
<DataTemplate x:Key="NewTemplate">
    <TextBlock Text="{Binding Name}">
        <TextBlock.ToolTip>
            <StackPanel>
                <TextBlock Text="{Binding PhoneNo}"/>
            </StackPanel>
        </TextBlock.ToolTip>
    </TextBlock>
</DataTemplate>

 

Here we define two different data template to display tool tip differently. Now we are going to create an object of our class and set these two data template in it properties.

Code Snippet
<local:MyTemplateSelector x:Key="myTemplateSelectorObj"
    PreferredCustomerTemplate="{StaticResource PreferredTemplate}"
    NewCustomerTemplate="{StaticResource NewTemplate}"/>

 

Now for GridViewColumn we are going to use CellTemplateSelector instead of template.

Code Snippet
<GridViewColumn Width="145" Header="Name" CellTemplateSelector="{StaticResource myTemplateSelectorObj}"/>

 

Here is complete XAML of our program.

Code Snippet
<Window x:Class="WpfToolTip.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        xmlns:local="clr-namespace:WpfToolTip"
        Title="ToolTip" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="PreferredTemplate">
            <TextBlock Text="{Binding Name}">
                <TextBlock.ToolTip>
                    <Border Margin="2" BorderThickness="1" BorderBrush="Navy" CornerRadius="5">
                        <Border.Background>
                            <LinearGradientBrush>
                                <GradientStop Offset="0" Color="AliceBlue"/>
                                <GradientStop Offset="1" Color="LightBlue"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <StackPanel Margin="3">
                            <TextBlock Text="{Binding Designation}" Foreground="DarkBlue" FontWeight="Bold" FontSize="14"/>
                            <TextBlock Text="{Binding PhoneNo}" Foreground="DarkBlue"/>
                        </StackPanel>
                    </Border>
                </TextBlock.ToolTip>
            </TextBlock>
        </DataTemplate>
        <DataTemplate x:Key="NewTemplate">
            <TextBlock Text="{Binding Name}">
                <TextBlock.ToolTip>
                    <StackPanel>
                        <TextBlock Text="{Binding PhoneNo}"/>
                    </StackPanel>
                </TextBlock.ToolTip>
            </TextBlock>
        </DataTemplate>
        <local:MyTemplateSelector x:Key="myTemplateSelectorObj"
            PreferredCustomerTemplate="{StaticResource PreferredTemplate}"
            NewCustomerTemplate="{StaticResource NewTemplate}"/>
    </Window.Resources>
    <Grid>
        <ListView Margin="5" ItemsSource="{Binding}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="145" Header="Name" CellTemplateSelector="{StaticResource myTemplateSelectorObj}"/>
                    <GridViewColumn Width="145" Header="Address">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Address}">
                        </TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

 

And here is complete C# code of our program.

Code Snippet
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;

namespace WpfToolTip
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<Customer> customers = new ObservableCollection<Customer>();

        public MainWindow()
        {
            InitializeComponent();

            customers.Add(new Customer("Alex", "Frederick MD", "111-111-1111", "Preferred"));
            customers.Add(new Customer("Bob", "Newton MA", "222-222-2222", "New"));
            customers.Add(new Customer("Charlis", "Burbank MA", "333-333-3333", "New"));
            customers.Add(new Customer("Dave", "Allentown PA", "444-444-4444", "Preferred"));

            DataContext = customers;
        }
    }

    class Customer
    {
        public Customer(String name, String address, String phoneNo, String designation)
        {
            Name = name;
            Address = address;
            PhoneNo = phoneNo;
            Designation = designation;
        }

        public String Name
        { get; set; }

        public String Address
        { get; set; }

        public String PhoneNo
        { get; set; }

        public String Designation
        { get; set; }
    }

    public class MyTemplateSelector : DataTemplateSelector
    {
        public DataTemplate PreferredCustomerTemplate
        { get; set; }

        public DataTemplate NewCustomerTemplate
        { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            Customer customer = item as Customer;

            if (customer != null)
            {
                if (customer.Designation == "Preferred")
                    return PreferredCustomerTemplate;
                else if (customer.Designation == "New")
                    return NewCustomerTemplate;
            }

            return base.SelectTemplate(item, container);
        }
    }
}

 

Here is the output of the program if we place mouse on preferred customer.

ConditionalToolTipOutput_1

And here is the output of the program if we place mouse on new customer.

ConditionalToolTipOutput_2

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: