Xamarin.Forms binden Höhe des Gitters an die Breite der Schaltfläche

Question

Ich versuche, das folgende UI-Element mit Xamarin.Forms zu erstellen. Ich konnte dies mit UWP durch Bindung der Height Eigenschaft der TopGrid an die ActualWidth Eigenschaft von Button1 bauen. Dies funktioniert jedoch nicht in Xamarin.Forms, weil es keine ActualWidth Eigenschaft gibt. Ich habe bereits versucht, die Height von TopGrid zu WidthRequest zu binden, aber ohne Erfolg.

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

Hat jemand Erfahrung mit Xamarin.Forms und mir bei diesem Problem helfen?

Answer 1

Das erste, was zuerst: XAML-Namen sind case-sensitive, so dass anstelle von

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

sollte

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

Daneben sein, XAML war fast ok. Schauen wir uns an

Height="{Binding Path=WidthRequest}" 

Sie versuchen, auf die Ansicht der Höhe zu binden, aber die HeightProperty ist eine schreibgeschützte BindableProperty, so dass Sie es nicht festlegen. Wenn Sie sich die API ansehen, gibt es auch keinen öffentlichen Setter für die Eigenschaft Height. Anstatt also an die Höhe zu binden, sollten Sie sich an die HeighRequest binden.

HeightRequest="{Binding Path=WidthRequest}" 

, dass die Art und Weise ist zu sagen, dass Sie die Grid mögen von dieser Höhe sein, und das Layout-System wird sein Bestes tun, um Sie glücklich zu machen (aber das ist ein Best-Effort-only).

Ich denke, dass Sie das jetzt bekommen. Die Schaltfläche WidthRequest ist die Anfrage des Benutzers, und in diesem Fall ist sie nicht festgelegt und der Wert wird auf den Standardwert gesetzt. Stattdessen möchten Sie die tatsächliche Height der Schaltfläche als Quelleigenschaft Ihrer Bindung verwenden. Lass es uns tun:

HeightRequest="{Binding Width}" 

und das gibt das erwartete Ergebnis:

Hier ist die vollständige korrigierte XAML-Snippet:

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