#379 – Using a Tooltip As a Magnifier

You can use a tooltip as a magnifier, so that when you hover over a control, it shows an enlarged view of the control.

We define a tooltip to contain a Rectangle that is exactly twice the size of the associated control (using data binding and a value converter).  We then fill the Rectangle with a VisualBrush and bind the Visual property of the VisualBrush to the element that is hosting the tooltip.

    <Window.Resources>
        <loc:DoubleIntConverter x:Key="doubleIntConverter"/>

        <ToolTip x:Key="reflectingTooltip" DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
                 Placement="Center">
            <Rectangle Width="{Binding ActualWidth, Converter={StaticResource doubleIntConverter}}"
                       Height="{Binding ActualHeight, Converter={StaticResource doubleIntConverter}}">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding}"/>
                </Rectangle.Fill>
            </Rectangle>
        </ToolTip>
    </Window.Resources>

Using the tooltip:

        <Label Content="Can you read me now?" ToolTip="{StaticResource reflectingTooltip}"
               HorizontalAlignment="Center"/>

The implementation of the value converter is left as an exercise.

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #379 – Using a Tooltip As a Magnifier

  1. Pingback: Dew Drop – August 6, 2011 | Alvin Ashcraft's Morning Dew

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: