1

I've got a strange issue with the layout of my Windows Phone App. I have a grid, with 4 columns. Inside each, I put a Border, and i would like these borders to be perfect square (even if my container height changes...).

Here is the relevant code :

<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>

It renders great in Blend:

enter image description here

But when I run it on the simulator, my borders are gone (looks like the height got to 0).

I don't have any Code on codebehind..

Do anybody have any thoughts on my issue ?

Thanxs,

Kuf
  • 17,318
  • 6
  • 67
  • 91
jmindark
  • 13
  • 3

1 Answers1

1

You trying bind to the ActualWidth/ActualHeight property. From an older question (here), this is a known issue with Silverlight, and there is no simple workaround.

Try something else such as bind to Width & specify a column width :

   <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>
Community
  • 1
  • 1
Cybermaxs
  • 24,378
  • 8
  • 83
  • 112
  • In fact I will just use SizeChanged event, because hardcoding a width is not ideal. Thanxs for the light of the "bug" with binding ActualWidth! – jmindark Jan 23 '13 at 13:15