Xamarin.Forms の Grid のレイアウト仕様が独特
Xamarin.Forms で下記のような Grid を組んでみました
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:view="clr-namespace:XamarinSample.Views;assembly=XamarinSample" xmlns:vm="clr-namespace:XamarinSample.ViewModels;assembly=XamarinSample" x:Class="XamarinSample.Views.TopPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" Android="0, 0, 0, 0" WinPhone="0, 0, 0, 0" /> </ContentPage.Padding> <ContentPage.BindingContext> <vm:TopPageViewModel/> </ContentPage.BindingContext> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <view:ArcStepper Grid.Row="0" HorizontalOptions="FillAndExpand"/> <view:BottomBar Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/> </Grid> </ContentPage>
これを実行して表示された画面は・・・
なんで左寄せになるの?!
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:view="clr-namespace:XamarinSample.Views;assembly=XamarinSample" xmlns:vm="clr-namespace:XamarinSample.ViewModels;assembly=XamarinSample" x:Class="XamarinSample.Views.TopPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" Android="0, 0, 0, 0" WinPhone="0, 0, 0, 0" /> </ContentPage.Padding> <ContentPage.BindingContext> <vm:TopPageViewModel/> </ContentPage.BindingContext> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <view:ArcStepper Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand"/> <view:BottomBar Grid.Column="0" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/> </Grid> </ContentPage>
しかたがないので ColumnDefinitions を追加してみると
これでもだめ~
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:view="clr-namespace:XamarinSample.Views;assembly=XamarinSample" xmlns:vm="clr-namespace:XamarinSample.ViewModels;assembly=XamarinSample" x:Class="XamarinSample.Views.TopPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" Android="0, 0, 0, 0" WinPhone="0, 0, 0, 0" /> </ContentPage.Padding> <ContentPage.BindingContext> <vm:TopPageViewModel/> </ContentPage.BindingContext> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <view:ArcStepper Grid.Column="1" Grid.Row="0"/> <view:BottomBar Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/> </Grid> </ContentPage>
これならどうだ!
やっと思い通りになりました
本家 XAML と仕様が違いますね・・・
Xamarin 公式の Guide や Forum を探してみたのですがこういった仕様に関する記載がなく、仕様なのか不具合なのか区別がつきませんでした;