Question

我想在<Border>周围<Image> - 听起来很简单。但我永远无法让它出现。我最终用“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>

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

发生了什么事？有人可以解释这一点，以防止我将来“奇迹”吗？

谢谢，大卫

Answer 1

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

边框控件扩展为Grid的大小，而不是仅围绕Image控件

1 个答案: