Xamarin.Formsグリッドの高さをボタンの幅に合わせる

Question

次のUIエレメントをXamarin.Formsで作成しようとしています。私は、UWPでプロパティをTopGridのActualWidthプロパティをButton1にバインドすることでこれを構築できました。ただし、ActualWidthプロパティがないため、これはXamarin.Formsでは機能しません。私はすでに、の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は、ほとんどOKでした。あなたは、ビューの高さにバインドしようとしているが、HeightPropertyは、読み取り専用BindablePropertyですので、あなたがそれを設定することはできません

Height="{Binding Path=WidthRequest}" 

を見てみましょう。 APIを見ると、Heightプロパティのパブリックセッターはありません。したがって、Heightにバインドする代わりに、HeightRequestにバインドする必要があります。あなたはGridは、その高さになりたいというの道をだし、レイアウトシステムがあなたを幸せにするために最善を尽くします（それが最善の努力のみです）

HeightRequest="{Binding Path=WidthRequest}" 

。

あなたはこれを今すぐ取得すると思います。ボタン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>