CODEWITHSUNDEEP
wpfwindows-phone-7
jmindark
jmindark

Reputation: 13

Binding the height of a border to its width

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,

Upvotes: 1

Views: 1942

Answers (1)

Cybermaxs
Cybermaxs

Reputation: 24556

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>

Upvotes: 1

Related Questions