Bind to ActualHeight of Item ItemsControl

Question

I have two separate ItemsControls that appear side by side. The ItemsControls bind to the same ItemsSource, but they display the data differently.

Each item displayed on the left will most likely be smaller than the same item on the right. This causes a problem because the rows will not line up, so I need the item on the left to bind to the item on the right.

ItemsControl        ItemsControl
|Item 1         |Item 1
|Item 2         |Item 2
|Item 3         |
|Item 4         |Item 3

As you can see, Item 2 on the right is larger, so it throws off the alignment. So if I can bind left's Item 2 to right's Item 2's ActualHeight the problem would be solved. How can I do this in XAML?

Edit: To make things more complicated, the ItemsControl on the right needs to scroll right to left, but both ItemsControls need to scroll up and down together. Basically, the left one provides a header of sorts for the items on the right.

Answer 1

Following up on Jobi Joy's answer

You can't do a direct OneWayToSource Binding in Xaml for the ReadOnly Dependency Property ActualHeight but there are many workarounds. The answer by Kent Boogaart in this question is my favorite. What is does is that it uses an Attached Behavior that listens to the SizeChanged event of any FrameworkElement and updates two Attached Properties, Width and Height, accordingly.

With a TextBlock for example, ActualHeight can be used to push into a Height property of the ViewModel like

<TextBlock local:ActualSizeBehavior.ObserveActualSize="True"
           local:ActualSizeBehavior.ActualHeight="{Binding Path=Height,
                                                           Mode=OneWayToSource}"
           .../>

---

Synkronize two ScrollViewers
You can either use a DependencyPropertyDescriptor to listen for changes in the VerticalOffsetProperty property or subscribe to the ScrollChanged event and call ScrollToVerticalOffset. Example

Xaml

<ScrollViewer Name="scrollViewerLeft"
              ScrollChanged="scrollViewerLeft_ScrollChanged">
<ScrollViewer Name="scrollViewerRight"
              ScrollChanged="scrollViewerRight_ScrollChanged">

Code behind event handlers

private void scrollViewerLeft_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    scrollViewerRight.ScrollToVerticalOffset(scrollViewerLeft.VerticalOffset);
}
private void scrollViewerRight_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    scrollViewerLeft.ScrollToVerticalOffset(scrollViewerRight.VerticalOffset);
}

ActualSizeBehavior

public static class ActualSizeBehavior
{
    public static readonly DependencyProperty ActualSizeProperty =
        DependencyProperty.RegisterAttached("ActualSize",
                                            typeof(bool),
                                            typeof(ActualSizeBehavior),
                                            new UIPropertyMetadata(false, OnActualSizeChanged));
    public static bool GetActualSize(DependencyObject obj)
    {
        return (bool)obj.GetValue(ActualSizeProperty);
    }
    public static void SetActualSize(DependencyObject obj, bool value)
    {
        obj.SetValue(ActualSizeProperty, value);
    }
    private static void OnActualSizeChanged(DependencyObject dpo,
                                            DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement element = dpo as FrameworkElement;
        if ((bool)e.NewValue == true)
        {
            element.SizeChanged += element_SizeChanged;
        }
        else
        {
            element.SizeChanged -= element_SizeChanged;
        }
    }

    static void element_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        FrameworkElement element = sender as FrameworkElement;
        SetActualWidth(element, element.ActualWidth);
        SetActualHeight(element, element.ActualHeight);
    }

    private static readonly DependencyProperty ActualWidthProperty =
        DependencyProperty.RegisterAttached("ActualWidth", typeof(double), typeof(ActualSizeBehavior));
    public static void SetActualWidth(DependencyObject element, double value)
    {
        element.SetValue(ActualWidthProperty, value);
    }
    public static double GetActualWidth(DependencyObject element)
    {
        return (double)element.GetValue(ActualWidthProperty);
    }

    private static readonly DependencyProperty ActualHeightProperty =
        DependencyProperty.RegisterAttached("ActualHeight", typeof(double), typeof(ActualSizeBehavior));
    public static void SetActualHeight(DependencyObject element, double value)
    {
        element.SetValue(ActualHeightProperty, value);
    }
    public static double GetActualHeight(DependencyObject element)
    {
        return (double)element.GetValue(ActualHeightProperty);
    }
}

Answer 2

Since the ItemsSource is same on both, you can use a single ItemsControl and a whole row represented as two sections (Two columns of a Grid) inside that single DataTemplate, then heights will get aligned automatically. You can always style it to look like it is part of two different ItemsControl but technically one.

Another way to go with this is, adding a Height property in to the ViewModel (of course not very right design since adding View dependency to VM). TwoWay bind the height to the ActualHeight of the left-itemsControl ItemContainerStyle. And on the right-itemscontrol bind that Height property to the Height of ItemsContainerStyle {One Way}. So both will be in sync.

Another idea based on your update 'Need of the scroll on the right side' : Use a single ListView and have two columns in it, and of those two GridViewColumn.CellTemplate have your two DataTemplates. This idea still needs column freezing on the first column. But that may be more tricky.

Anyway I would go with the first approach here.

Answer 3

Take a look at my article: http://www.codeproject.com/KB/WPF/BindingHub.aspx

That's how you can bind to Read-Only Dependency Properties using BindingHub:

<bindings:BindingHub 
       Visibility="Hidden"
       Socket1="{Binding ActualWidth, ElementName=Item, Mode=OneWay}"
       Socket2="{Binding ItemWidth, Mode=OneWayToSource}"
       Connect="(1 in, 2 out)"/>

Answer 4

I had to solve this exact problem. I used the read only binding solution found here: https://meleak.wordpress.com/2011/08/28/onewaytosource-binding-for-readonly-dependency-property/

Using this I was able to bind the read only ActualHeight of each ListViewItem in one ListView to a property in my item view model called ListViewItemHeight. Then, in the second ListView, I bound the height of each item to ListViewItemHeight.