Xamarin.Forms将网格的高度绑定到Button的宽度

Question

我尝试使用Xamarin.Forms构建以下UI元素。通过将UWP的{​​{1}}属性绑定到Height的{​​{1}}属性，我可以使用TopGrid构建此代码。但是，这在Xamarin.Forms中不起作用，因为没有ActualWidth属性。我已经尝试将Button1的{​​{1}}绑定到ActualWidth，但没有成功。

Height

是否有人有TopGrid的经验并可以帮我解决这个问题？

Answer 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达到那个高度的方式，并且布局系统会尽力让你开心（但是那个＆＃39; sa尽力而为。）

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

HeightRequest="{Binding Width}"

这给出了预期的结果：

这里是完整更正的Xaml片段：

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

Answer 2

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

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