Question

I want to use a button which when the mouse enters the button a popup image is displayed. The complication is that the image will overlap the button and I want the image to remain visible until the mouse leaves either the button or the image. I’ve found that as the image overlaps the button I can’t use the mouse leave event of the button as as soon as the mouse moves over the part of the button which is being overlapped by the image the image is hidden.

This seems a simple requirement but I just can’t get a working solution and any help would be really appreciated

Answer 1

All you have to do is put the image inside the button (for example using a Popup), you can even do it all in XAML:

<Button>
    <Button.ContentTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="Button Text"/>
                <Popup Name="popup">
                    <Image Source="Image.png"/>
                </Popup>
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver,RelativeSource={RelativeSource TemplatedParent}}" Value="true">
                    <Setter TargetName="popup" Property="IsOpen" Value="true"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

I used a DataTemplate and didn’t put the content into the button because I needed it to use triggers to show and hide the popup.