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

时间:2014-06-06 09:47:06

标签: c# xaml windows-store-apps

我想将控件的高度绑定为另外两个高度的总和,因此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无效,但它演示了我想要做的事情。我有两个元素,itemitemTitleitem是设置为屏幕高度的ScrollView,我希望GridViewScrollView的高度相同,减去{{1}的高度}}

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

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

1 个答案:

答案 0 :(得分:3)

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

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

使用行为

首先,您需要将Blend SDK引用添加到项目中。 enter image description here

然后,您需要创建一个实现GridView的新类。此类需要三个IBehavior才能引用dependency propertiesGridViewitem。因此,您可以订阅他们的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

希望这有帮助。