C#/XAML: Binding not working for properties of Button.RenderTransform

Question

Hello, I have the following code in which I bind to the ActualHeight of a Grid for the Button.RenderTransform.TranslateX property of a Button:

<Button HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button.RenderTransform>
                    <CompositeTransform TranslateX="{Binding ElementName=ContentRoot, Path=ActualHeight}"/> <!--Does not work-->
                </Button.RenderTransform>
            </Button>

When I first specify {Binding ElementName=ContentRoot, Path=ActualHeight}, the phone designer indicates that everything is working. However, when I rebuild the solution (and look at the designer) or run it in my app, the Button is there as if it hasn't been translated at all.

When I did a Debug.WriteLine of the Button's RenderTransform and the Grid's ActualHeight (after they finished loading), the debugger printed out "0 640".

However, when I specify a hardcoded length such as 200, then it works perfectly. Also, Binding to the exact same property works fine when I set it as the Width of the Button, for example. But none of the properties of Button.RenderTransform seem to be able to bind to that expression.

To reproduce the bug, you can simply paste the snippet above into the Grid generated by any Windows Phone app template. (Make sure you set ElementName= to the appropriate value, of course.)

Answer 1

So wierd, encountered the same issue,  Can't figure it out why it will be like this, Will keep on this

Answer 2

Hi James.Ko,

>>However, when I rebuild the solution (and look at the designer) or run it in my app, the Button is there as if it hasn't been translated at all.

It is because that when we bind the ContentRoot.ActualHeight to the Button in the xaml, the value for the ContentRoot.ActualHeight is just 0.0, the MainPage has not finished the loading, so the button will not translate at all, you can try the below code:

So if you want to bind the ContentRoot.ActualHeight value to the Button, we can do it on the MainPage Loaded event as following:

 private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            double TEST = ContentRoot.ActualHeight;
            CompositeTransform CompositeTransform = new CompositeTransform();
            CompositeTransform.TranslateX = ContentRoot.ActualHeight;
            MyButton.RenderTransform = CompositeTransform;
        }

Best Regards,
Amy Peng

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 3

Amy, thank you for your answer. However, the only thing that I am finding strange is that only properties of the CompositeTransform are not working; for example, the following code works perfectly, both in the designer and on the phone.

<Button Width="{Binding ElementName=LayoutRoot, Path=ActualHeight}"/>

But if I bind within a CompositeTransform, then absolutely no type of {Binding ElementName=...} code will work. For example, if I do this, it will not work:

<Button>
    <Button.RenderTransform>
        <CompositeTransform SomeProperty="{Binding ElementName=SomeFrameworkElement, 
Path=Height}"/> <!--Will not work under any circumstances-->
    </Button.RenderTransform>
</Button>

This doesn't look like it's limited to just Buttons, either, because I discovered this with a WebView.

---

I would also prefer not to use C# code when it comes to the layout of the page.