Question

I’ve got a DataTemplate which I use for items in a ListBox (a grid with the first column showing an icon depending on the file extension, the second column containing the file name):

<DataTemplate x:Key="ListItemTemplate">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="16"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Image Source="{Binding Icon}" Grid.Column="0" Grid.Row="0" Width="16" Height="16">
        <Image.ToolTip>
            <ToolTip Width="{Binding Path=ActualWidth, ElementName=ToolTipImage, Converter={StaticResource toolTipImageConverter}}" Height="{Binding Path=ActualHeight, ElementName=ToolTipImage, Converter={StaticResource toolTipImageConverter}}">
                <Image Source="{Binding FileNameForThumbnailDisplay}" Name="ToolTipImage">
                    <Image.RenderTransform >
                        <TransformGroup>
                            <ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
            </ToolTip>
        </Image.ToolTip>
    </Image>
    <Label Content="{Binding FileNameWithExtension, Mode=OneWay}" Grid.Column="1" Grid.Row="0" BorderBrush="Transparent" Height="Auto"></Label>
</Grid>

I’d like to show a ToolTip containing a scaled down Image when hovering over an icon in the first column. This is what works, but what I’d like to achieve is to also reduce the ToolTip displaying the image according to the dimensions of the scaled down image, e.g. something like this:

Image abc in listbox:

+--ToolTip-------+
|+-Scaled-Image-+|
||              ||
||              ||
|+--------------+|
+----------------+

Image xyz in listbox:

+--ToolTip-----------------+
|+-Scaled-Image-----------+|
||                        ||
||                        ||
|+------------------------+|
+--------------------------+

I wrote a Converter to return the ActualWidth (of the rendered Image element) to set the dimensions, but the converter is never entered.

I needed I could supply the code used for the Converter, however, I don’t think it’s relevant as it isn’t entered (break point while debugging is never hit).

How can I achieve that the ToolTip control’s dimensions dynamically adjust to the image within? Is this possible?

Answer 1

Simply change RenderTranform to LayoutTransform and don’t bind Width or Height. The ToolTip window will fit to size automatically.

<Image.ToolTip>
    <ToolTip>  
        <Image Source="{Binding FileNameForThumbnailDisplay}" Margin="4">
            <Image.LayoutTransform> 
                <ScaleTransform ScaleX="0.5" ScaleY="0.5"/> 
            </Image.LayoutTransform> 
        </Image>
    </ToolTip>
</Image.ToolTip>