2010-06-22 39 views
22

Tengo un StackPanel que contiene cinco imágenes y quiero poner un borde negro alrededor de cada imagen.¿Cómo coloco un borde alrededor de una imagen en WPF?

El XAML que tengo en este momento es:

<Image Name="imgPic1" 
     Width="100" 
     Height="75" 
     Stretch="Fill" 
     VerticalAlignment="Top" /> 

pensé que iba a ser sólo capaz de poner un margen de una unidad o de relleno en la imagen y establecer un color de fondo para 000000 pero Padding y Background ambos son inválidos para las imágenes.

¿Qué es una manera fácil de hacer esto en XAML? ¿Realmente tengo que poner cada imagen dentro de otro control para obtener un borde alrededor o hay algún otro truco que pueda usar?

Respuesta

49

Simplemente envuelva la imagen en un control fronterizo

<Border BorderThickness="1"> 
    <Image Name="imgPic1" 
      Width="100" 
      Height="75" 
      Stretch="Fill" 
      VerticalAlignment="Top" /> 
</Border> 

También podría proporcionar un estilo que se aplican a las imágenes que hace esto si no quiere hacerlo alrededor de cada imagen


solución final de la respuesta y los comentarios añadidos por Pax:

<Border BorderThickness="1" 
     BorderBrush="#FF000000" 
     VerticalAlignment="Top"> 
    <Image Name="imgPic1" 
      Width="100" 
      Height="75" 
      Stretch="Fill" 
      VerticalAlignment="Top"/> 
</Border> 
+0

Eso se ve bien, pero ¿cómo lo hago negro? El fondo de configuración afecta el espacio alrededor del borde, no el borde en sí, y no hay propiedad de color o primer plano. – paxdiablo

+0

Tienes que usar la propiedad BorderBrush. Puede especificar un color hexadecimal allí o puede especificar un pincel más complejo. Si quieres que sea negro, sería BorderBrush = "# FF000000" –

+0

Gracias por eso, Craig. Funciona bien ahora. – paxdiablo

2

me tropecé con este post y la otra respuesta no funcionó bien. Tal vez porque ahora uso Framework 4 y esta publicación es vieja?

En cualquier caso - si alguien va a ver esto por casualidad en el futuro - aquí es mi respuesta:

<Border Name="brdSiteLogo" 
      BorderThickness="2" 
      BorderBrush="#FF000000" 
      VerticalAlignment="Top" 
      HorizontalAlignment="Left" 
      Margin="12,112,0,0" 
      Height="128" 
      Width="128"> 

    <Image Name="imgSiteLogo"    
     HorizontalAlignment="Stretch" 
     VerticalAlignment="Stretch" 
     Stretch="Fill"/> 

    </Border> 

El grosor del borde y el pincel son importantes (si decide planteo un color - no verá el borde !!!)

Además, el borde debe estar alineado en su ventana. La imagen está "dentro" del borde, por lo que puede usar márgenes o simplemente estirarlo como lo hice.

+0

¡Gracias por tu comentario! No utilices firmas/frases en tus publicaciones. Su cuadro de usuario cuenta como su firma, y ​​puede usar su perfil para publicar cualquier información sobre usted que desee. [Preguntas frecuentes sobre firmas/eslóganes] (http://stackoverflow.com/faq#signatures) –

Cuestiones relacionadas