How to adjust the height of the control table to a different control height?

Question

I am trying to have 2 controls of the same height. Can I do this only with XAML?

If I did something like <Canvas Height="{Binding Height, ElementName=AnotherControl}" /> , it actually does nothing, and the height will be zero. The Output panel does not complain about any binding errors, so AnotherControl.Height really exists. I tried binding to ActualHeight, but it does nothing.

Anything else I missed?

Answer 1

I assume that you AnotherControl did not explicitly specify Height . Unfortunately, in WinRT (unlike WPF, but just like Silverlight), ActualWidth and ActualHeight are so-called “calculated properties”. This means that an event with a changed property does not internally rise when they change. As a result, binding to them is unreliable, and, as you noticed, this will not work.

Side of the note: it may work from time to time, but this is only due to the fact that the time the get call is bound to ActualHeight .

So, you cannot do this with XAML only. You must handle the encoding of the ActualControl.SizeChanged event and set explicitly Height to AnotherControl.ActualHeight .

Answer 2

As Ksiti Mehta mentioned, binding to ActualHeight and ActualWidth in WinRT is not reliable. But there is a good job where you do not need to use SizeChanged-Event:

Add this class:

 public class ActualSizePropertyProxy : FrameworkElement, INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public FrameworkElement Element { get { return (FrameworkElement)GetValue(ElementProperty); } set { SetValue(ElementProperty, value); } } public double ActualHeightValue { get { return Element == null ? 0 : Element.ActualHeight; } } public double ActualWidthValue { get { return Element == null ? 0 : Element.ActualWidth; } } public static readonly DependencyProperty ElementProperty = DependencyProperty.Register("Element", typeof(FrameworkElement), typeof(ActualSizePropertyProxy), new PropertyMetadata(null, OnElementPropertyChanged)); private static void OnElementPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((ActualSizePropertyProxy)d).OnElementChanged(e); } private void OnElementChanged(DependencyPropertyChangedEventArgs e) { FrameworkElement oldElement = (FrameworkElement)e.OldValue; FrameworkElement newElement = (FrameworkElement)e.NewValue; newElement.SizeChanged += new SizeChangedEventHandler(Element_SizeChanged); if (oldElement != null) { oldElement.SizeChanged -= new SizeChangedEventHandler(Element_SizeChanged); } NotifyPropChange(); } private void Element_SizeChanged(object sender, SizeChangedEventArgs e) { NotifyPropChange(); } private void NotifyPropChange() { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("ActualWidthValue")); PropertyChanged(this, new PropertyChangedEventArgs("ActualHeightValue")); } } } 

Put it in resources:

 <UserControl.Resources> <c:ActualSizePropertyProxy Element="{Binding ElementName=YourElement}" x:Name="proxy" /> </UserControl.Resources> 

And bind its properties:

 <TextBlock x:Name="tb1" Text="{Binding ActualWidthValue, ElementName=proxy}" /> 

Answer 3

This question is very old, but here is my solution. You can use this code

 <!--First Button--> <Button x:Name="button1" Height="50" Width="100"/> <!--Second Button--> <Button x:Name="button2" Height="50" Width="{Binding ElementName=button1, Path=Width}"/> 

I tested it on my Windows / Windows Phone 8.1 device and it works great.