2010-04-27 19 views
16

Quiero hacer un control de usuario que muestre una imagen y pueda invocar un comando cuando haga clic. Más tarde quiero vincular una lista de estos controles a una lista de productos.Creación de una imagen clicable en WPF

Respuesta

44

probar este enfoque muy directa

<Grid> 
     <Button Height="50" Width="50"> 
      <Button.Template> 
       <ControlTemplate> 
        <Image Source="yourimage.png"/> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 

    </Grid> 

private void Button_Click(object sender, RoutedEventArgs e) 
     { 
      // do smt 
     } 
+2

Este fue el enfoque más directo que he visto sin tener que anular todos los estilos visuales para el botón. – jrandomuser

+1

Me he ido con este enfoque, pero la reutilización se va por la ventana, ya que efectivamente está codificando el nombre de la imagen. Pero, se ajusta a mis necesidades. –

+0

@jrandomuser ver mi respuesta a continuación. –

4

Existen varias formas de hacerlo, pero una solución simple sería usar un botón (tal vez alejar el borde y el fondo) y usar la imagen como contenido del botón.

Más adelante puede usar un ListBox o similar y anular el DataTemplate para usar el botón y una imagen para cada producto.

+0

Esta es de hecho la primera ruta que estaba tomando, pero me pregunto si hay una solución más limpia. – mico

+0

Ver mi respuesta más abajo para el código – mico

8

Bueno, después de un poco más de manipulación, un simple botón hace el trabajo. Aquí está:

<Button Command="{Binding Path=DisplayProductCommand}" > 
    <Image Source="..\Images\my-beautiful-product.jpg"/> 
</Button> 
+3

No se trata de una imagen clicable, este es un botón con una imagen dentro. Estoy desconcertado de que esto esté marcado como la respuesta aceptada. [Este] (http://stackoverflow.com/a/21597209/161250) debería ser la respuesta aceptada. – Alex

3
<Image Name="imageFoo" Source="/AppFoo;component/Foo.png" Width="32" Cursor="Hand" MouseUp="imageFoo_MouseUp"/> 

    private void imageFoo_MouseUp(object sender, MouseButtonEventArgs e) 
    { 
     //Do something 
    } 
+0

Esto no invoca un ICommand definido en XAML – mico

+3

Lo sentimos, mico, por no entender completamente su requisito. Permítanme dejar mi respuesta allí por si alguien necesita una forma rápida de tener una imagen clicable. – Hong

1

Yo no sé ustedes, pero PreviewMouseDown y TouchUp trabajó completamente bien junto con mi vinculante:

<Image x:Name="bla" Source="{Binding blabla}" ... TouchDown="bla_TouchDown" PreviewMouseDown="bla_PreviewMouseDown"> 

Estoy usando VS 2015

Cuestiones relacionadas