{Binding ElementName=...} does not work from any CompositeTransform property

Question

I have the following code in which I hide a WebView just under the main Grid (LayoutRoot) so I can do a sliding animation later:

<Page...>
    <Grid x:Name="LayoutRoot">
        ...
        <Grid x:Name="ContentRoot">
            ...
        </Grid>
        <WebView...>
            <WebView.RenderTransform>
                <CompositeTransform TranslateY="{Binding ElementName=LayoutRoot, 
                                    Path=ActualHeight}"/> <!--Does not work-->
            </WebView.RenderTransform>
        </WebView> 
    </Grid>
</Page>

When I first type the {Binding ElementName=...} line into the designer, the WebView appears just below the Grid like it should. However, when I rebuild the solution or run the app, the WebView simply obscures the whole LayoutRoot.

This will happen regardless of what I am binding to/whatever the control is; however, binding to the exact same expression will show up properly in the designer and in the phone. To demonstrate what I am saying:

<Button Width="{Binding ElementName=LayoutRoot, Path=ActualHeight}"> <!--Works perfectly, both on designer and phone-->
    <Button.RenderTransform>
        <CompositeTransform SomeProperty={Binding ElementName=SomeElement, Path=SomePath}"/> <!--This does not work-->
    </Button.RenderTransform>
</Button>

Is there any way to bind to LayoutRoot.ActualHeight short of writing C# code for this?

Answer 1

One problem you have is you are trying to bind to ActualHeight which is not a dependency property nor an observable (INotifyPropertyChanged) property, so the binding is only evaluated once when it's first created.