Xamarin.Forms 将网格的高度绑定到按钮的宽度答案

【问题标题】：Xamarin.Forms bind Height of Grid to Width of ButtonXamarin.Forms 将网格的高度绑定到按钮的宽度
【发布时间】：2017-02-21 19:51:22
【问题描述】：

我尝试使用Xamarin.Forms 构建以下 UI 元素。通过将TopGrid 的Height 属性绑定到ActualWidth 的ActualWidth 属性，我能够使用UWP 构建它。但是，这在 Xamarin.Forms 中不起作用，因为没有 ActualWidth 属性。我已经尝试将TopGrid 的Height 绑定到WidthRequest，但没有成功。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid x:Name="TopGrid" Grid.Row="0" BindingContext="{x:Reference Name=Button1}"  Height="{Binding Path=WidthRequest}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button x:Name="Button1" Grid.Column="0" Text="1" />
        <Button x:Name="Button2" Grid.Column="1" Text="2" />
        <Button x:Name="Button3" Grid.Column="2" Text="3" />
        <Button x:Name="Button4" Grid.Column="3" Text="4" />
    </Grid>
</Grid>

有没有人有使用Xamarin.Forms 的经验并且可以帮助我解决这个问题？

【问题讨论】：

标签： xaml data-binding xamarin.forms

【解决方案1】：

首先要做的事：Xaml 名称区分大小写，所以不是

BindingContext="{x:Reference Name=button1}"

这应该是

BindingContext="{x:Reference Name=Button1}"

除此之外，您的 Xaml 几乎没问题。来看看

Height="{Binding Path=WidthRequest}"

您正在尝试绑定到视图的高度，但 HeightProperty 是只读的 BindableProperty，因此您无法设置它。如果您查看 API，Height 属性也没有公共设置器。因此，您应该绑定到 HeightRequest，而不是绑定到 Height。

HeightRequest="{Binding Path=WidthRequest}"

这就是说您希望Grid 达到那个高度，并且布局系统会尽最大努力让您开心（但这只是尽力而为）。

我想你现在明白了。按钮WidthRequest 是用户发出的请求，在这种情况下，它没有设置，它的值保留为默认值。相反，您希望使用按钮的实际 Width 作为绑定的源属性。让我们开始吧：

HeightRequest="{Binding Width}"

这给出了预期的结果：

这是完整更正的 Xaml sn-p：

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid x:Name="TopGrid" Grid.Row="0" BindingContext="{x:Reference Name=Button1}"  HeightRequest="{Binding Width}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Button x:Name="Button1" Grid.Column="0" Text="1" BackgroundColor="Pink"/>
    <Button x:Name="Button2" Grid.Column="1" Text="2" BackgroundColor="Pink"/>
    <Button x:Name="Button3" Grid.Column="2" Text="3" BackgroundColor="Pink"/>
    <Button x:Name="Button4" Grid.Column="3" Text="4" BackgroundColor="Pink"/>
  </Grid>
</Grid>

【讨论】：

【解决方案2】：

如果您不想为整个网格（以及其中的每个项目）设置 BindingContext，那么您可以直接在绑定中指定它，如下所示，允许所有其他控件保留其原始 BindingContext：

 <Grid x:Name="TopGrid" Grid.Row="0" HeightRequest="{Binding Width, Source={x:Reference Button1}}">

【讨论】：