Custom user controls in WPF with vector graphics

Question

I've created the graphics for the user control as a vector graphic and imported it into Expression Design. So far everything worked w/o problems. However I then exported it as XAML and opened it in VS. The XAML consists of a canvas and several Paths. I created a user control in XAML, now I want a mouse click event, which is triggered if the user clicks on any of these paths. I could attach the same event to every path, but it would be more elegant to group the paths, is there a way to do this?

Also I was asking myself whether WPF can use a standard format for vector graphics like SVG.

Below the XML code.

    <Canvas x:Name="Arrow" Width="40" Height="400" Canvas.Left="0" Canvas.Top="0">
    <Path Width="11.432" Height="361.1" Canvas.Left="12.861" Canvas.Top="-2.666" StrokeThickness="12" StrokeLineJoin="Round" Stroke="#FFFF2800" Data="F1 M 310,130.967L 310,480.067"/>
    <Path Width="6.75" Height="355.767" Canvas.Left="15.25" Canvas.Top="0" Stretch="Fill" StrokeThickness="6.66667" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="F1 M 310,130.967L 310,480.067"/>
    <Path Width="22.725" Height="30.4" Canvas.Left="6.363" Canvas.Top="351.1" Stretch="Fill" StrokeThickness="2.66667" StrokeMiterLimit="2.75" Stroke="#FFFF2800" Fill="#FFFF2800" Data="F1 M 310,507.8L 320.4,480.067L 299.6,480.067"/>
    <Path Width="29.97" Height="2.667" Canvas.Left="4.107" Canvas.Top="2" Stretch="Fill" StrokeThickness="2.66667" StrokeMiterLimit="2.75" Stroke="#FFFF2800" Data="F1 M 296.133,130.967L 323.867,130.967"/>
    </Canvas>

Answer 1

I haven't got time to verify this, but off the top of my head, if you put your event on the canvas, and don't specify a background for it, then you should only get the click event when the user clicks on any of the paths it contains.