Sergey Barskiy's Blog

I have not blogged in a month.  What I found out in that time is that working 60-70 hours a week on two separate projects with deadlines is not very conducive to blogging :-).  Now that I am off one of the projects, I should have more time to get into the routine of blogging weekly which has been my goal for a while.

Tooltips are pretty common in business applications.  They save real estate on the screen for developers.  They also provide users with ability to see more details without any button clicks.

It is very easy to setup a simple tool tip.  Here is a quick example:

        <TextBox 
           TextWrapping  ="Wrap" 
           Text="{Binding Path=CurrentPerson.FirstName}" 
           d:LayoutOverrides="Width, Height" 
           Grid.Column="1" 
           ToolTipService.ToolTip="{Binding Path=CurrentPerson.FullName}"/>

In this example I am binding text of a TextBox to FirstName of my person class.  Here is what my person class looks like:

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Media.Imaging;


namespace SilverlightToolTipDemo

{

    public class Person

    {

        public Person()

        {

            LastName = "Barskiy";

            FirstName = "Sergey";

            FullName = "Mr. Sergey Barskiy";

            Occupation = "Programmer";

            MaritalStatus = "Married";

            BitmapImage image = new BitmapImage(new Uri("../Images/Sergey_Barskiy.jpg", UriKind.RelativeOrAbsolute));

            Photo = image;


        }


        public string LastName { get; set; }

        public string FirstName { get; set; }

        public string FullName { get; set; }

        public string Occupation { get; set; }

        public string MaritalStatus { get; set; }

        public ImageSource Photo { get; set; }



    }

}

This looks pretty boring though.  Too much like old WinForms :-).

Let’s now use Silverlight capabilities and jazz it up a bit.

In the simple case you can just assign a string to tool tip and it will be shown on mouse-over event.  However, ToolTip property of ToolTipService can do a lot more.  You can put a control inside of it!  In my case, I want to show full name, photo, occupation and martial status.  Sounds complicated?  It is not.  Here is what it should look like:

        <TextBox

            Text="{Binding Path=CurrentPerson.LastName}"

            Grid.Column="1"

            d:LayoutOverrides="Width, Height"

            Grid.Row="1">

            <ToolTipService.ToolTip>

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto" />

                        <ColumnDefinition/>

                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="Auto"/>

                    </Grid.RowDefinitions>

                    <Image

                        Source="{Binding Path=CurrentPerson.Photo}"

                        Grid.ColumnSpan="2"

                        Grid.Row="0"

                        Width="100"

                        Height="100"

                        Stretch="UniformToFill"/>

                    <TextBlock

                        Grid.Row="1"

                        Text="Full Name:"

                        d:LayoutOverrides="Width, Height"

                        HorizontalAlignment="Right"

                        VerticalAlignment="Center"/>

                    <TextBlock

                        Grid.Row="1"

                        Text="{Binding Path=CurrentPerson.FullName}"

                        d:LayoutOverrides="Width, Height"

                        HorizontalAlignment="Left"

                        VerticalAlignment="Center"

                        Grid.Column="1"/>

                    <TextBlock

                        Text="Occupaton:"

                        d:LayoutOverrides="Width, Height"

                        HorizontalAlignment="Right"

                        VerticalAlignment="Center"

                        Grid.Row="2"/>

                    <TextBlock

                        Text="{Binding Path=CurrentPerson.Occupation}"

                        d:LayoutOverrides="Width, Height"

                        HorizontalAlignment="Left"

                        VerticalAlignment="Center"

                        Grid.Column="1"

                        Grid.Row="2"/>

                    <TextBlock

                        Text="Marital Status:"

                        d:LayoutOverrides="Width, Height"

                        HorizontalAlignment="Right"

                        VerticalAlignment="Center"

                        Grid.Row="3"/>

                    <TextBlock

                        Text="{Binding Path=CurrentPerson.MaritalStatus}"

                        d:LayoutOverrides="Width, Height"

                        HorizontalAlignment="Left"

                        VerticalAlignment="Center"

                        Grid.Column="1"

                        Grid.Row="3"/>

                </Grid>

            </ToolTipService.ToolTip>

        </TextBox>

Pretty easy, hah?  When I move my mouse over this textbox, I will see my photo along with additional information:

You can download full sample application here.

Thanks.