WPF 边框无法很好地包裹图像？答案

【问题标题】：WPF border failed to wrap Image nicely?WPF 边框无法很好地包裹图像？
【发布时间】：2013-11-22 19:04:23
【问题描述】：

<Border CornerRadius="3" BorderBrush="#fff" BorderThickness="3px" Width="100" Height="100">
    <Image Source="test.jpg" Width="100" Height="100"/>
</Border>

如上面的代码所示，我强制图像的宽度和高度以及边框都为 100。我的意图是让边框可以包裹图像而没有任何不必要的空间。不过请看下面的结果：

边框和图片之间还有多余的空格吗？ 这个问题可以通过减小边框的宽度和高度来解决，但我就是不明白为什么。下面是我的原始图像，其中宽度和高度大于 100：

【问题讨论】：

那是什么问题？或者你只是想了解它？
@Gabson：是的，我只是想了解它。既然图片和边框都设置了100，那么边框不应该完全包裹图片吗？
您的边框是图像周围 3 像素的白色区域。你到底需要什么？
@Samuel：是的，确实出现了白色边框。但是白色边框不能很好地包裹图像。顶部和底部有不必要的空格你看不到吗？
你想达到什么目标？

标签： c# wpf

【解决方案1】：

您已将您的Border 上的BorderBrush 属性设置为White，并将BorderThickness 属性设置为3px。我只能想象那解释了Border 边缘周围的白线。只需移除这些属性即可移除白色环绕线。

更新>>>

我同意@GazTheDestroyer。如果您的图像实际上比 100 像素宽，那么它将自动调整大小以适应 94 像素。如果您的图像比它的高宽，那么这将解释顶部和底部的差距。试试这个：

<Image Source="test.jpg" Stretch="None" />

您还可以试验Stretch 属性的其他可能值。

【讨论】：

我也用原始图像更新了我的问题。我需要一个 3px 白色边框来包裹图像，它们的宽度和高度都设置为 100

【解决方案2】：

<Border> 不覆盖元素，它包含一个元素。因此，如果您的边框为 100 像素，边框为 3 像素，则内部仅剩下 94 像素的空间。

在图像上设置明确的 100 大小意味着由于边框不够大而无法显示所有图像，因此其中一些将被切掉。另外我看到你的图像不是正方形（120x103px），这意味着它也会以奇怪的纵横比缩放。

如果您真的希望边框覆盖在与图像完全相同的正方形顶部，请将它们放在 <Grid> 或 <Canvas> 的相同位置。例如

<Grid>
   <Image Source="test.jpg" Width="100" Height="100"/>
   <Border CornerRadius="3" BorderBrush="#fff" BorderThickness="3px" Width="100" Height="100" Background="Transparent">
</Grid>

【讨论】：

根据你说的：如果边框里面只剩下94px的空间，而我的图像大小为100，为什么顶部和底部会出现多余的空间？
我的直接想法是您实际上并没有设置图像高度，这意味着图像将以其原始纵横比缩放，其中宽大于长。如果您真的在图像上同时设置高度和宽度，那我不知道。
上面已经给出了所有的代码。你认为宽度和高度都设置为 100 吗？