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

Question

我尝试使用构建以下UI元素Xamarin.Forms.我能有建立这个UWP由绑定Height的属性TopGrid的ActualWidth财产Button1.但是这在Xamarin.Forms中不起作用,因为没有ActualWidth属性.我已经尝试过绑定Height的TopGrid到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可以帮我解决这个问题？

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达到那个高度的方式,布局系统会尽力让你开心(但这只是最好的努力).

我想你现在就明白了.按钮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>