绑定到 Item ItemsControl 的 ActualHeight

Question

我有两个并排出现的单独的 ItemsControl。 ItemsControl 绑定到相同的 ItemsSource，但它们显示的数据不同。

左侧显示的每个项目很可能比右侧的相同项目小。这会导致问题，因为行不会对齐，所以我需要左侧的项目绑定到右侧的项目。

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

正如您所看到的，右侧的第 2 项较大，因此它偏离了对齐方式。因此，如果我可以将左侧的 Item 2 绑定到右侧的 Item 2 的 ActualHeight ，问题就可以解决。我如何在 XAML 中执行此操作？

编辑：为了让事情变得更复杂，右侧的ItemsControl需要从右向左滚动，但两个ItemsControls都需要上下滚动一起。基本上，左边的项目为右边的项目提供了某种标题。

Answer 1

跟进 Jobi Joy 的回答

您无法在 Xaml 中为 ReadOnly 依赖属性 ActualHeight 进行直接的 OneWayToSource 绑定，但有许多解决方法。 Kent Boogaart 在这个问题中的回答< /a> 是我的最爱。它的作用是使用一个附加行为来侦听任何 FrameworkElement 的 SizeChanged 事件，并相应地更新两个附加属性：宽度和高度。

以 TextBlock 为例，ActualHeight 可用于推送 ViewModel 的 Height 属性，例如

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

---

同步两个 ScrollViewers
您可以使用 DependencyPropertyDescriptor 侦听 VerticalOffsetProperty 属性中的更改，或者订阅 ScrollChanged 事件并调用 ScrollToVerticalOffset >。示例

Xaml

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

事件处理程序背后的代码

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

由于两者的 ItemsSource 相同，因此您可以在该单个 DataTemplate 中使用单个 ItemsControl 和表示为两个部分（网格的两列）的整行，然后高度将自动对齐。您始终可以将其设计为看起来像是两个不同的 ItemsControl 的一部分，但从技术上讲是一个。

另一种方法是，在 ViewModel 中添加 Height 属性（当然，自从将 View 依赖项添加到 VM 以来，这不是非常正确的设计）。 TwoWay 将高度绑定到 left-itemsControl ItemContainerStyle 的 ActualHeight。在右侧项目控件上，将该 Height 属性绑定到 ItemsContainerStyle {One Way} 的高度。所以两者会同步。

基于您的更新“需要右侧滚动”的另一个想法：
使用单个 ListView 并在其中有两列，这两个 GridViewColumn.CellTemplate 有两个 DataTemplate。这个想法仍然需要在第一列上进行列冻结。但这可能更加棘手。

无论如何，我会采用第一种方法。

Answer 3

看看我的文章： http://www.codeproject.com/KB/WPF/ BindingHub.aspx

这就是使用 BindingHub 绑定到只读依赖属性的方式：

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

Answer 4

我必须解决这个问题。我使用了此处找到的只读绑定解决方案：
https://meleak.wordpress.com /2011/08/28/onewaytosource-binding-for-readonly-dependency-property/

使用这个我能够绑定每个 ListViewItem 的只读 ActualHeight > 将一个 ListView 中的属性设置为我的项目视图模型中名为 ListViewItemHeight 的属性。然后，在第二个 ListView 中，我将每个项目的高度绑定到 ListViewItemHeight。