如何在WPF中为图像设置边框?

时间:2022-04-03 20:33:01

I have a StackPanel containing five images and I want to put a black border around each image.

我有一个包含5张图片的堆叠面板,我想在每个图片周围加上一个黑色的边框。

The XAML I have at the moment is:

我目前拥有的XAML是:

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

I thought I would be just able to put a one-unit margin or padding on the image and set a background color to 000000 but Padding and Background are both invalid for images.

我想我只需要在图像上加上一个单位的空白或填充,并将背景颜色设置为000000,但是填充和背景对图像来说都是无效的。

What is an easy way to do this in XAML? Do I really have to put each image inside another control to get a border around it or is there some other trickery I can use?

在XAML中最简单的方法是什么?我真的需要把每个图像都放到另一个控件中才能得到一个边框吗?或者我还可以使用其他的技巧吗?

3 个解决方案

#1


51  

Simply wrap the Image in a Border control

只需将图像包装在边框控件中

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

You could also provide a style you apply to images that does this if you don't want to do it around every image

你也可以提供一个样式,你可以应用到这样的图像,如果你不想在每一个图像周围做它。


Final solution from answer and comments added by Pax:

最后的解决方案来自Pax的回答和评论:

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

#2


2  

I just stumbled upon this post and the other answer did not work right. Maybe because I now use framework 4 and this post is old?

我只是偶然发现了这篇文章,而另一个答案并不正确。也许是因为我现在使用框架4,而这篇文章是旧的?

In any case - if someone will see this by chance in the future - here is my answer:

在任何情况下——如果将来有人碰巧看到这一点——我的回答是:

 <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>

The border thickness and brush are important (if you wont choose a color - you will not see the border!!!)

边框的厚度和笔刷很重要(如果你不选择颜色,你就看不到边框!)

Also, the border should be aligned on your window. The image is "inside" the border, so you can use margins or just stretch it like I did.

此外,边框应该对齐到窗口上。图像在边框里面,所以你可以使用边距或者像我一样拉伸它。

#3


0  

The accepted answer will not work because of the problem described here https://wpf.2000things.com/2011/04/17/279-adding-a-border-around-an-image-control/

由于这里描述的问题,被接受的答案将无法工作

I solved it this way.

我是这样解的。

<Viewbox>
    <Border BorderThickness="3" BorderBrush="Red">
     <Image Stretch="None" ></Image>
    </Border>
   </Viewbox>

#1


51  

Simply wrap the Image in a Border control

只需将图像包装在边框控件中

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

You could also provide a style you apply to images that does this if you don't want to do it around every image

你也可以提供一个样式,你可以应用到这样的图像,如果你不想在每一个图像周围做它。


Final solution from answer and comments added by Pax:

最后的解决方案来自Pax的回答和评论:

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

#2


2  

I just stumbled upon this post and the other answer did not work right. Maybe because I now use framework 4 and this post is old?

我只是偶然发现了这篇文章,而另一个答案并不正确。也许是因为我现在使用框架4,而这篇文章是旧的?

In any case - if someone will see this by chance in the future - here is my answer:

在任何情况下——如果将来有人碰巧看到这一点——我的回答是:

 <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>

The border thickness and brush are important (if you wont choose a color - you will not see the border!!!)

边框的厚度和笔刷很重要(如果你不选择颜色,你就看不到边框!)

Also, the border should be aligned on your window. The image is "inside" the border, so you can use margins or just stretch it like I did.

此外,边框应该对齐到窗口上。图像在边框里面,所以你可以使用边距或者像我一样拉伸它。

#3


0  

The accepted answer will not work because of the problem described here https://wpf.2000things.com/2011/04/17/279-adding-a-border-around-an-image-control/

由于这里描述的问题,被接受的答案将无法工作

I solved it this way.

我是这样解的。

<Viewbox>
    <Border BorderThickness="3" BorderBrush="Red">
     <Image Stretch="None" ></Image>
    </Border>
   </Viewbox>