Comment faire pour mettre à l'échelle des images ont des régions cliquables dans WPF

Question

En utilisant une image à l'intérieur d'une vue (à l'intérieur d'un DockPanel), j'ai créé une image qui est mise à l'échelle avec ma fenêtre dans une application wpf.

<Viewbox HorizontalAlignment="Left" Name="viewbox1" VerticalAlignment="Top" Stretch="Uniform" StretchDirection="UpOnly"> 

    <Image Height="438" Name="image1" Stretch="Uniform" Width="277" Source="/MyAPP;component/Images/TicTacToeBoardForExample.png" MouseDown="image1_MouseDown" /> 
</Viewbox> 

Comment puis-je faire certaines régions de l'image exécuter du code différent quand on clique dessus? Je souhaite que cela se fasse de telle manière que, quelle que soit la taille de l'image (lors du redimensionnement des fenêtres), les régions exactes souhaitées s'adaptent parfaitement à l'image de sorte que, lorsqu'elle est cliquée, elle déclenche code-à-être-exécuté pour cette région.

Answer 1

Votre exigence exacte n'est pas claire, mais il serait utile si vous jetez un oeil aux méthodes TranslatePoint et PointToScreen sur le FrameworkElement.

Answer 2

J'ai déjà eu besoin de faire une chose similaire. Ce qui a été fait était de mettre des boutons sur l'image. Ensuite, vous mettez leur opacité à 0 ou 3.0 ou quelque chose, de sorte que vous ne voyez pas les boutons, mais pouvez toujours cliquer dessus. Lorsqu'ils sont correctement ajoutés, les boutons peuvent être redimensionnés avec l'image.

Answer 3

Off mémoire que vous pourriez faire quelque chose comme ceci:

public void image1_MouseDown(object sender, MouseEventArgs e) 
{ 
    var pos = e.GetPosition(viewbox1); 
    if (/* pos in range 1 */) DoTheThingInRange1(); 
    else if (/*pos in range 2*/) DoTheThingInRange2(); 
    else if (/*pos in range 3...*/) DoTheThingInRange3(); 
    //so on... 
} 

HTH