Windows应用商店应用 - XAML - 为高度属性绑定两个值

Question

我想将控件的高度绑定为另外两个高度的总和，因此UI看起来很漂亮。

<GridView
    AutomationProperties.AutomationId="ItemDetails"
    ItemsSource="{Binding data}"
    IsSwipeEnabled="False"
    SelectionMode="None" Height="{Binding Height, (ElementName=item - ElementName=itemTitle)}" >
    <GridView.ItemTemplate>
        <DataTemplate>
            <dll:TaskItemControl/>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

上述XAML无效，但它演示了我想要做的事情。我有两个元素，item和itemTitle。 item是设置为屏幕高度的ScrollView，我希望GridView与ScrollView的高度相同，减去{{1}的高度}}

有没有办法在XAML中执行此操作？

注意：这样做的原因超出了本问题的范围。因此，请不要评论限制itemTitle内控件的高度。

Answer 1

这可以通过订阅两个元素的SizeChanged事件在后面的代码中轻松完成，并在调用处理程序时更新Height的{​​{1}}。

但是你想要一个纯粹的XAML解决方案，这就是Behaviors发挥作用的地方。

使用行为。

首先，您需要将Blend SDK引用添加到项目中。

然后，您需要创建一个实现GridView的新类。此类需要三个IBehavior才能引用dependency properties，GridView和item。因此，您可以订阅他们的itemTitle个事件并相应地调整SizeChanged。

我选择将此行为附加到顶级Height（很可能是您的 LayoutRoot Panel），因为我想确保其下的所有元素都正确呈现在其Grid事件处理程序中。

完整行为类看起来像这样 -

Loaded

}

然后在我的XAML中，我将它附加到我的顶级public class HeightBehavior : DependencyObject, IBehavior { public GridView GridView { get { return (GridView)GetValue(GridViewProperty); } set { SetValue(GridViewProperty, value); } } public static readonly DependencyProperty GridViewProperty = DependencyProperty.Register("GridView", typeof(GridView), typeof(HeightBehavior), new PropertyMetadata(null)); public FrameworkElement FirstItem { get { return (FrameworkElement)GetValue(FirstItemProperty); } set { SetValue(FirstItemProperty, value); } } public static readonly DependencyProperty FirstItemProperty = DependencyProperty.Register("FirstItem", typeof(FrameworkElement), typeof(HeightBehavior), new PropertyMetadata(null)); public FrameworkElement SecondItem { get { return (FrameworkElement)GetValue(SecondItemProperty); } set { SetValue(SecondItemProperty, value); } } public static readonly DependencyProperty SecondItemProperty = DependencyProperty.Register("SecondItem", typeof(FrameworkElement), typeof(HeightBehavior), new PropertyMetadata(null)); public DependencyObject AssociatedObject { get; set; } public void Attach(DependencyObject associatedObject) { this.AssociatedObject = associatedObject; var control = (Panel)this.AssociatedObject; control.Loaded += AssociatedObject_Loaded; } private void AssociatedObject_Loaded(object sender, RoutedEventArgs e) { this.FirstItem.SizeChanged += FirstItem_SizeChanged; this.SecondItem.SizeChanged += SecondItem_SizeChanged; // force to re-calculate the Height this.FirstItem.Width += 0.5; } private void FirstItem_SizeChanged(object sender, SizeChangedEventArgs e) { this.SetAssociatedObjectsHeight(); } private void SecondItem_SizeChanged(object sender, SizeChangedEventArgs e) { this.SetAssociatedObjectsHeight(); } private void SetAssociatedObjectsHeight() { this.GridView.Height = this.FirstItem.ActualHeight - this.SecondItem.ActualHeight; } public void Detach() { this.FirstItem.SizeChanged -= FirstItem_SizeChanged; this.SecondItem.SizeChanged -= SecondItem_SizeChanged; var control = (Panel)this.AssociatedObject; control.Loaded -= AssociatedObject_Loaded; } ，就像这样。

Grid

希望这有帮助。