绑定到Item ItemsControl的ActualHeight [英] Bind to ActualHeight of Item ItemsControl

问题描述

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

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

如您所见，右侧的第2项较大，因此它使对齐方式无效.因此，如果我可以将左边的第2项绑定到右边的第2项ActualHeight，那么该问题将得到解决.如何在XAML中做到这一点?

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?

为了使事情更复杂，右侧的ItemsControl需要从右向左滚动，但是两个ItemsControls都需要一起向上和向下滚动.基本上，左侧是右侧项目的标题.

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.

推荐答案

紧跟 Jobi Joy的答案

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

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.

例如，使用TextBlock时，ActualHeight可用于将ViewModel的Height属性推入

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}"
           .../>

---

同步化两个ScrollViewer
您可以使用DependencyPropertyDescriptor侦听VerticalOffsetProperty属性中的更改，也可以订阅ScrollChanged事件并调用ScrollToVerticalOffset.例子

---

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">

事件处理程序背后的代码

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);
    }
}

这篇关于绑定到Item ItemsControl的ActualHeight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！