WPF边框无法很好地包装Image？

Question

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

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

边框和图像之间还有不必要的空格？ 问题可以通过减少边框的宽度和高度来解决，但我只是不明白为什么。下面是我的原始图像，宽度和高度大于100：

Answer 1

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

---

更新＆gt;＆gt;＆gt;

我同意@GazTheDestroyer。如果您的图像实际上比100px宽，那么它将自动调整大小以适应94px。如果您的图像比图像宽，那么这将占据顶部和底部的间隙。试试这个：

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

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

Answer 2

<Border>没有覆盖元素，它包含一个元素。因此，如果边框为100px且边框为3px，则内部仅剩余94px的空间。

在图像上设置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>