Граница управления расширяется до размера сетки, а не просто окружает элемент управления изображения - PullRequest
Новая
       25

Граница управления расширяется до размера сетки, а не просто окружает элемент управления изображения

0 голосов
/ 30 декабря 2011

Я хотел <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>

Чтобы «исправить» это, я обнаружил, что добавление 'HorizontalAlignment = "Left" VerticalAlignment = "Top" "к <Border> установило границуоколо <Image>, по желанию.Я также обнаружил, что могу заключить <Border> в <Canvas> и достичь аналогичного результата.

Что происходит?Может кто-нибудь объяснить это таким образом, чтобы предотвратить мое «чудо» в будущем?

Спасибо, Дэвид

1 Ответ

1 голос
/ 30 декабря 2011

По умолчанию для VerticalAlignment и HorizontalAlignment установлено значение «Растянуть», поэтому по умолчанию граница растягивается на все доступное пространство.Это не происходит внутри Canvas, потому что Canvas не учитывает эти свойства при выполнении макета своих дочерних элементов, поэтому они получают минимальный размер на основе таких свойств, как Width, Height, MinWidth и аналогичных свойств своих дочерних элементов.Позиционирование в Canvas выполняется с помощью свойств Canvas.Top и Canvas.Left, а сетка использует свойства ~ Alignment, а также поля.

...