将边框的高度绑定到其宽度

Question

我的Windows Phone应用程序布局存在一个奇怪的问题。 我有一个网格，有4列。在每个内部，我放了一个边框，我希望这些边框是完美的方形（即使我的容器高度改变了......）。

以下是相关代码：

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="Red"  Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource self}}"><TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" /></Border>
<Border Grid.Column="1" Background="Red" Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource self}}"><TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" /></Border>
<Border Grid.Column="2" Background="Red" Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource self}}"><TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" /></Border>
<Border Grid.Column="3" Background="Red" Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource self}}"><TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" /></Border>

</Grid>

它在Blend中呈现出色：

但是当我在模拟器上运行时，我的边框消失了（看起来高度变为0）。

我在codebehind上没有任何代码..

有人对我的问题有任何想法吗？

Thanxs，

Answer 1

您尝试绑定到ActualWidth / ActualHeight属性。从较旧的问题（here）来看，这是Silverlight的一个已知问题，并没有简单的解决方法。

尝试使用其他内容，例如绑定到Width＆amp;指定列宽：

   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" Background="Red"  Width="100" Height="{Binding Path=Width, RelativeSource={RelativeSource self}}">
            <TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <Border Grid.Column="1" Background="Red"  Width="100" Height="{Binding Path=Width, RelativeSource={RelativeSource self}}">
            <TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <Border Grid.Column="2" Background="Red"  Width="100" Height="{Binding Path=Width, RelativeSource={RelativeSource self}}">
            <TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <Border Grid.Column="3" Background="Red"  Width="100" Height="{Binding Path=Width, RelativeSource={RelativeSource self}}">
            <TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>

    </Grid>