This can be achieved, although not entirely simple.
First, you need to get pictures of each of the areas. Contact your graph for this. to the designer. In the picture there should be only an area, and the rest should be transparent.
Now, we need to define a click on a non-transparent area. The easiest way to do this is to use specialized controls, and override hit testing. Then we can use the WPF built-in procedures.
Inherited from Image :
public class OpaqueClickableImage : Image { static int transparentAlpha = 128; protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters) { if (Source == null) return null; var source = Source as BitmapSource; if (source == null) throw new NotSupportedException("Need BitmapSource"); if (source.Format != PixelFormats.Bgra32) throw new NotSupportedException("Need 32-bit pixel format with alpha channel"); // Get the pixel of the source that was hit var x = (int)(hitTestParameters.HitPoint.X / ActualWidth * source.PixelWidth); var y = (int)(hitTestParameters.HitPoint.Y / ActualHeight * source.PixelHeight); var pixel = new byte[4]; source.CopyPixels(new Int32Rect(x, y, 1, 1), pixel, 4, 0); if (pixel[3] < transparentAlpha) return null; return new PointHitTestResult(this, hitTestParameters.HitPoint); } }
(The code is stolen with gratitude stolen here .)
Great, try to use. We will add our handler to the click, and on IsMouseOver we IsMouseOver add a glow effect through the style.
<Window.Resources> <Style TargetType="Image" x:Key="ImageWithGlow"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect ShadowDepth="0" Color="White" Opacity="0.8" BlurRadius="8"/> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid Background="Red"> <local:OpaqueClickableImage Source="transparentheart.png" Style="{StaticResource ImageWithGlow}" MouseLeftButtonDown="OnImageClick"/> </Grid>
(I specially painted a picture with a heart , you can use it on March 8.)
Result (in the second animation, for example, several identical pictures are next to each other):
