1

I want to create a Windows 8 application using C# and XAML.

I want to have an image with different parts of it being clickable, the same way that you can with the imagemap element in HTML.

There might be a way of doing this with individual images but it would be very difficult to position them correctly.

So is it possible to make images clickable in XAML?

PriestVallon
  • 1,519
  • 1
  • 22
  • 44

2 Answers2

2

You can surely add events to track down MouseDown and MouseUp events and convert those to your own Click event... but that doesn't sound right in WPF, with exceptions obviously. If you're making a security system that relies on customizable images with user-defined patters for clicking on the image - sure. But if you're drawing user interface in Photoshop and want to make that work - you're doing it wrong: you lose styling, vector rendering, control-specific events - the whole idea of WPF essentially.

Bottom line: unless you specify a task that justifies use of images the answer can only be: don't do it.

Sten Petrov
  • 10,943
  • 1
  • 41
  • 61
2

Simple Concept Example in just xaml...

Added namespaces ;)

 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
 xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"


<Grid Height="300" Width="300">
       <Grid.Background>
         <Image/> <!-- Add your image source here, 
                       you dont want to know the picture I was going to put :) -->
       </Grid.Background>

       <Rectangle Height="20" Width="20" Stroke="Red" StrokeThickness="2" Margin="60,120">
         <i:Interaction.Triggers>
           <!-- Couldn't recall if its "Click" event or "MouseLeftButtonDown" -->
             <i:EventTrigger EventName="MouseLeftButtonDown">
                <ei:ChangePropertyAction TargetName="Blah"
                                         PropertyName="Visibility"
                                         Value="Visible" />
             </i:EventTrigger>
         </i:Interaction.Triggers>
       </Rectangle>

       <TextBlock Text="Whoa Dude, Where's my click?" x:Name="Blah" FontSize="50" Visibility="Collapsed"/>

    </Grid>
Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • If I understand this correctly, it is you are split the image up using a grid and depending on which part of the grid is press you can use a different method? – PriestVallon Jan 19 '13 at 17:25
  • 1
    Nah, you could use a Grid, a Canvas, whatever you like. Then you're just placing something over where you want Mouse events to be received on the picture. Going by grid cells would limit how precise you could make the areas. Where as if you used this technique you could attach events to shapes, paths, whatever you want. So for example say you wanted a click Map, draw your path around the shape of a state, attach a Mouse event to it, and place it over the state on a map image and voila... – Chris W. Jan 19 '13 at 17:36
  • For anyone reading this who has complex shapes, use expression studio to create and export the paths into xaml. This will save a lot of time. – SeeMoreGain Jul 21 '14 at 03:43