WPF - Bind vector image to Enhanced Tooltip

Question

In my MainWindow I have a toolbar with a series of buttons. Each button displays an icon which is a vector image converted from Inkscape in the form:

<Viewbox>
    <Canvas>
        <Geometry .../>
    </Canvas>
</Viewbox>

All the icons are stored in a ResourceDictionary:

<DataTemplate x:Key="myIcon">
    <Viewbox>
        <Canvas>
            <Geometry .../>
        </Canvas>
    </Viewbox>
</DataTemplate>

and assigned to the relevant button through a ContentPresenter:

<Button x:Name="myButton">
    <Button.ToolTip>
        <myDependencyProperties:EnhancedTooltip Header="Main" Style="{StaticResource EnhancedTooltip}" Content="Main Page"/>
    </Button.ToolTip>
    <Button.Content>
        <ContentPresenter ContentTemplate="{StaticResource myIcon}"/>
    </Button.Content>
</Button>

My Enhanced Tooltip control should display, among others, the icon of the parent button (as it's the case for some buttons within MS Office Ribbon). I've tried a few ways to bind the content of the tooltip, adding a label or a button and binding its content to the one of the button, like in:

<ContentPresenter ContentTemplate="{Binding Path=ManyDifferentAttempts, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>

No need to say that I failed. I also tried to assign the icon to the button through styles as in:

<Button x:Name="myButton">
    <Button.ToolTip>
        <myDependencyProperties:EnhancedTooltip Header="Main" Style="{StaticResource EnhancedTooltip}" Content="Main Page"/>
    </Button.ToolTip>
    <ContentControl Style="{StaticResource myIcon}"/>
</Button>

where the icons are of course stored as Styles:

<Style x:Key="myIcon" TargetType="ContentControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <Viewbox>
                    <Canvas>
                        <Geometry .../>
                    </Canvas>
                </Viewbox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and added a Content Control (label or button) to the EnhancedTooltip to mimic the parent button behaviour by binding its ContentPresenter Style to the one of the parent button. Without any success.

I could easily reach my goal when I used an image (png) as the icon for my button:

<Button x:Name="myButton">
    <Button.ToolTip>
        <myDependencyProperties:EnhancedTooltip Header="Main" Style="{StaticResource EnhancedTooltip}" Content="Main Page"/>
    </Button.ToolTip>
    <Image Source="PathToMyPNGImage"/>
</Button>

and, in my EnhancedTooltip style:

<Image Source="{Binding Path=Content.Source, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}} }"/>

How can I reach the same result now that I decided to use a vector image instead? I can easily go back to the previous approach, but I'd like to learn something new.

Thank you for your time.

Marco

Andy Andy · Accepted Answer · 2019-03-10T11:15:08

You can't just show a geometry.

Use a path.

Set or bind it's data to one of your geometries.

Lose the viewbox - and probably the canvas. Make the path content if you have a contentcontrol.

Set stretch to fill on the path.

I'd prefer to have a re-usable template if this is a common requirement and an attached property for the geometry. But this is the quick and dirty version to give you the idea of what I have in mind.

    <Button x:Name="myButton"
            Tag="{StaticResource Star}"
            >
        <Button.Content>
            <Path Fill="Blue"
                  Data="{Binding Tag, RelativeSource={RelativeSource AncestorType=Button}}"/>
        </Button.Content>
        <Button.ToolTip>
            <ToolTip>
                <Path Fill="Blue"
                      Data="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}"/>
            </ToolTip>
        </Button.ToolTip>
    </Button>

WPF - Bind vector image to Enhanced Tooltip

1 Answers