Gets or sets a value that specifies the image to be used to fill the tooltip text.
[Visual Basic]
Public Property FontTexture As Image
[C#]
public Image FontTexture {get; set;}
Property Value
Any bitmap image in a format supported by the .NET framework.
| Overridable |
Layout-file |
Property of | |||
| AnimationTT | ImageTT | SingleLineTT | MultiLineTT | ||
|
|
|
 |
|
 |
|
Description
This property holds the bitmap-image used to fill the tooltip text. It is only significant for layouts where TextStyle is set to one of the Texture-related styles. Using textures to paint text with, makes usually only sense for larger font-sizes. And, to get more of the image on the font surface, it is strongly suggested to apply the bold-style to the font.If FontTexture is set to Nothing (no image) but TextStyle=Texture..., the text will be filled with the color specified for FontColor.
The size of the image and the selected TextStyle (Texture...) determine how the image will be drawn to fill the tooltip text. If the image is smaller as the tooltip content size (that's the rectangular area that covers the whole tooltip text), the image can be tiled by flipping the image in both X- and Y-direction (TextStyle=TextureTile...), it can be stretched to fit the size of the tooltip content (TextStyle=TextureStretch) or a preferred sector can be taken and enlarged (TextStyle=TextureTake...). If the image is larger then the tooltip content, the image can not be tiled, it can only be stretched to fit the size of the tooltip content (TextStyle=TextureStretch) or a preferred sector can be taken and resized accordingly (TextStyle=TextureTake...).
Samples for some of the various options and combinations are shown below. As you can see, only little of the original image is visible because it is viewed like through a mask, where only the text is cut out. The samples below also show that larger images are only of limited use to render the text of tooltips - the visual effect depends too much from the granularity of the image-content, the amount of the displayed text and the selected font. Usually the use of textured fonts does not lead to easy readable tooltips - and that is what they should be in the first place...
| Image larger as the resulting tooltip content (Landscape) | ||
| Font settings | Original image | Result |
|
|
(Size: 500 x 252) |
|
| TextStyle=TextureStretch, forces the whole image to be taken to render the tooltip text. If the Width/Height-ratio of the tooltip content and the image do not match, the image might get distorted (as in the example) because for TextureStretch the scaling is not done isotropically. | ||
|
|
(Size: 500 x 252) |
 |
| TextStyle=TextureTakeCenter calculates the largest possible viewport on the source-image with the same aspect ratio as the tooltip content, places this viewport on the center of the image and takes this part of the image to fill the tooltip-text with (scaling it appropriately). | ||
|
|
(Size: 500 x 252) |
|
| TextStyle=TextureTakeUpperLeft does the same as TextureTakeCenter but the largest possible viewport is positioned more on the upper left-side of the image. | ||
 |
(Size: 500 x 252) |
|
| TextStyle=TextureTakeUpperRight positions the largest possible viewport on the upper right-side of the image. | ||
The samples show the situation for a source-image that is wider then high. For this kind of images usually it doesn't matter if TextureTakeUpper<position> or TextureTakeLower<position> (position=left or right) is selected, because the the tooltip component always tries to get the largest possible portion of the image that matches the aspect ratio of the tooltip content, and for this it assumes the shorter side of the image (in this case the height) to fill the height of the tooltip and adapts the width of the selected viewport accordingly. Therefore it suffices to indicate the horizontal position of the viewport.
For images in portrait-mode (Height > Width) the reverse applies: For this images it is important to specify the vertical position (upper, middle, lower) in order to get the desired result: This is shown in the samples below:
| Image larger as the resulting tooltip content (Portrait) | ||
| Font settings | Original image | Result |
|
|
(Size: 332 x 500) |
|
| TextStyle=TextureStretch, forces the whole image to be taken to render the tooltip text. If the Width/Height-ratio of the tooltip and the image do not match, the image might get distorted (as in the example) because for TextureStretch the scaling is not done isotropically. | ||
 |
(Size: 332 x 500) |
|
| Again, TextStyle=TextureTakeCenter takes the largest possible portion from the center of the image. | ||
|
|
(Size: 332 x 500) |
 |
| TextStyle=TextureTakeUpper... shifts the viewport to the top of the image and takes this part to render the tooltip border. | ||
|
|
(Size: 332 x 500) |
|
| TextStyle=TextureTakeLower... takes the lower part of the picture. | ||
Above we discussed the texture-related TextStyles that are applicable or have a visible effect if the image to be used as font-texture is larger as the tooltip content. Because larger images can not be tiled, it wouldn't make much sense to apply one of the TextureTile...-styles. On the other hand, it wouldn't make much sense to apply one of the TextureTake...-styles to an image that is already smaller then the target-area. How the tooltip components handle images as font-texture which are smaller as the tooltip content area is shown in some samples below:
| Image smaller as the resulting tooltip | ||
| Font settings | Original image | Result |
|
|
(Size: 84 x 67) |
|
| TextStyle=TextureStretch, forces the whole image to be taken to render the tooltip text. Because the image is much smaller then the resulting tooltip content, the image is enlarged accordingly to fill the tooltip area. If the Width/Height-ratio of the tooltip and the image do not match, the image might get distorted because for TextureStretch the scaling is not done isotropically. | ||
|
|
(Size: 84 x 67) |
 |
| TextStyle=TextureTile
indicates that the image should be tiled in order to fill the tooltip
content area.
The text will only be filled with tiles of the given image, if the image is
smaller then the resulting tooltip in one or both dimensions. If the given
image is larger then the tooltip, the tooltip text will be filled with
the image, but the result will be equivalent to text created with TextStyle=TextureTakeCenter.
(This applies to all TextureTile...-styles.)
As (sometimes) can be seen from the result, the tiles are just laid out one next to the other. No measures have been taken to prevent possibly visible edges or abrupt transitions between the individual tiles. |
||
|
|
(Size: 84 x 67) |
|
| TextStyle=TextureTileFlipX does exactly what is says: It flips the tiles (the source-image) in horizontal direction. This results in smooth transitions between the tiles in one row. Probably sharp transitions from one row to the other are still visible. | ||
 |
(Size: 84 x 67) |
|
| In contrast to TextureTileFlipX, TextStyle=TextureTileFlipY flips the tiles in vertical direction but not horizontally. Now this makes smooth transitions between the rows, but possibly the edges between the tiles in a row are again visible. | ||
|
|
(Size: 84 x 67) |
|
| TextStyle=TextureTileFlipXY finally makes sure that no edges are visible at all between the tiles, because the tiles are flipped vertically and horizontally. | ||
An important aspects to be considered when using textured fonts are the dimensions and the size of the used bitmaps. The dimensions of the used bitmap are important because they have an impact on memory-usage and performance. Of course it is perfectly possible to use images with millions of pixels. But images with this dimensions do not make much sense, if they are going to be shown in a tooltip which is only 200 to 500 pixels wide. The details of such high-resolution images get lost anyway in the process and the bitmaps just consume a lot of memory. This and the internal downscaling of the images are also notable in terms of performance. It will probably take much longer for the tooltip to pop-up, when over-dimensioned bitmaps are used as with appropriately sized images. The file-size of the images is important because it has a direct impact on the size of the compiled executable. Any image assigned to FontTexture at design-time will end up as a resource in the compiled application. Therefore it should be avoided to use multi-megabyte image-files as textures, if you don't want your executable to inflate like a balloon. You should also keep in mind, that high-resolution images, which maybe are not that big as files, because they are highly compressed JPEG-files, need to get decompressed and end up using quiet a lot of RAM as Image-objects in your application (e.g.: a 400k JPEG-image with 1536 x 2048 pixels uses up to 10 mb of RAM when residing in memory as a bitmap).
There are no golden rules on how to address this issues. The ToolTipsFactory tooltips are definitely able to handle even very large images and you are free to use them if really necessary. But in general it is better to scale the images down to a size that is in the range of the expected or desired tooltip-size. A pragmatic approach that gives good results in terms of quality, memory-usage and size is to proportionally scale down the images to a size where the number of horizontal pixels is two to three times the value set for DefaultWidth. This way, the size of the images is substantially reduced, but it still gives good results even if the size of the tooltip is slightly increased by changing the DefaultWidth, the FontSize (if applicable) or by the dynamic adaptation of the tooltip-size to different content.
If specified at the component-level for a tooltip component (i.e. by defining the FontTexture directly for the component), the assigned image will become the default FontTexture for the tooltips of all controls on the same form:
'Assign a new image to be used for textured tooltip text
'to the tooltip component
Me.MultiLine.GetMultiLineToolTip(Panel1).FontTexture = _ Image.FromFile("C:\Temp\Eclipse.jpg")
This default FontTexture can be overridden for each control through the Override-property provided to all controls on the same form by the tooltip component (see "The Override-Property").
If the override-value for the FontTexture has to be set or changed at runtime for the tooltip of a specific control, code like the following is needed:
'Assign a new image as texture for the tooltip text
'to the override-object for Panel1
Me.MultiLine.GetMultiLineToolTip(Panel1).Override _
.FontLayoutOverride.FontTexture = Image.FromFile("C:\Temp\Eclipse.jpg")
Example 1
This statements define a textured font at the component level:
'define a textured font for the tooltips provided by the component (MultiLine).
Me.MultiLine.TextStyle = TextDrawingStyle.TextureTakeCente
'load the image and assign it to the FontTexture property...
Me.MultiLine.FontTexture = Image.FromFile("C:\Temp\logo.jpg")