Home/ Questions/Q 8120037
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:59:43+00:00

I have an image in WPF that I would like to have display different

  • 0

I have an image in WPF that I would like to have display different information based upon where the mouse is currently hovering. I know I’ve seen this in websites, I just can’t seem to figure out the code to do it in WPF.

The image I’m using is a US map, and I need state specific info to appear as the user crosses the borders. Right now the implementation I’m using is a series of Paths drawn in transparent on top of the map, and then using the Mouse.MouseEnter event to trigger the change. The problem is that the updating seems to suffer from horrible lag, or else the MouseEnter event isn’t always catching properly.

Does anybody know of a better way to do this?

Sample C#

    private void wyoming_MouseEnter(object sender, MouseEventArgs e)
    {            
        //stateName.Text = "Wyoming";            
    }

Sample XAML

<Canvas MouseDown="Canvas_MouseDown" Name="canvas">
    <Viewbox Stretch="Uniform">
        <Image Source="USA.png" />
    </Viewbox>
    <Path Name="wyoming" Stroke="Transparent" StrokeThickness="1" Mouse.MouseEnter="wyoming_MouseEnter" Mouse.MouseMove="wyoming_MouseMove">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure IsClosed="True" StartPoint="184,121" >  <!--NW-->
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <LineSegment Point="266,129" />
                                    <LineSegment Point="264,193" />
                                    <LineSegment Point="203,190" /> 
                                    <LineSegment Point="177,186" /> 
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Personally what I did for this same instance (except I was labeling info pertaining to time zones and broadcast areas) was I made transparent path shapes for the areas I want able to be activated on mouseover and laid them over a U.S. Map, then I attached an Event trigger to each for the MouseEnter/MouseLeave events so when the user would mouse over the area of whatever Path, it would fire off that condition and do the action specified….in my instance it was showing radio station broadcast times and programs based on region and time zone. So if an are was Moused over, an info box visibility was set to Visible. On MouseLeave that same info box was set to Collapsed….etc

    It was very effective and worked real well and you can make your interactive areas very defined when using the precise shapes you made with your Paths. If I can dig up the source I’ll try and share but the project was over a year ago so hopefully the description gives you enough of an idea to get the creativity going. 🙂

    • 0