边框控件扩展到 Grid 的大小，而不是仅仅围绕一个 Image 控件答案

【问题标题】：Border control expands to size of Grid instead of just surrounding an Image control边框控件扩展到 Grid 的大小，而不是仅仅围绕一个 Image 控件
【发布时间】：2011-12-29 23:33:29
【问题描述】：

我想要在我的<Image> 周围有一个<Border> - 听起来很简单。但我永远无法让它出现。我最终用“BorderThickness=20”把它变成了“红色”——很明显，它围绕着整个“LayoutRoot”！比如：

<UserControl x:Class="BorderCrossing.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Margin="10" Background="Black">
    <Border Canvas.ZIndex="1" Background="White" HorizontalAlignment="Center" Opacity=".5" VerticalAlignment="Top">
        <TextBlock x:Name="idTextBlock" FontSize="20" FontWeight="Bold" Foreground="Black" Text="ID Here" />
    </Border>
    <Border Canvas.ZIndex="1" Background="Blue" BorderThickness="5" BorderBrush="AntiqueWhite">
        <Image x:Name="thumbnailImage" Height="100" Width="100" Stretch="Uniform" />
    </Border>
</Grid>

为了“解决”这个问题，我发现将“HorizontalAlignment="Left" VerticalAlignment="Top"' 添加到<Border> 会根据需要放置<Image> 周围的边框。我还发现我可以将<Border> 包含在<Canvas> 中并获得类似的结果。

发生了什么事？有人可以用一种可以防止我在未来发生“奇迹”的方式来解释这一点吗？

谢谢，大卫

【问题讨论】：

标签： silverlight image xaml grid border

【解决方案1】：

VerticalAlignment 和HorizontalAlignment 的默认值为“Stretch”，因此Border 默认会拉伸到整个可用空间。它不会发生在 Canvas 内部，因为 Canvas 在执行其子级的布局时不会考虑这些属性，因此它们会根据 Width、Height、MinWidth 等属性和其子级的类似属性获得最小尺寸。在 Canvas 中定位是使用 Canvas.Top 和 Canvas.Left 属性完成的，而 Grid 使用 ~Alignment 属性以及 Margins。

【讨论】：