読者です 読者をやめる 読者になる 読者になる

しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

Xamarin.Forms の Grid のレイアウト仕様が独特

Xamarin XAML Windows ランタイムアプリ

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>

これを実行して表示された画面は・・・

f:id:matatabi_ux:20140927200612p:plain

なんで左寄せになるの?!

<?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 を追加してみると

f:id:matatabi_ux:20140927200612p:plain

これでもだめ~

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

これならどうだ!

f:id:matatabi_ux:20140927201603p:plain

やっと思い通りになりました

本家 XAML と仕様が違いますね・・・

Xamarin 公式の Guide や Forum を探してみたのですがこういった仕様に関する記載がなく、仕様なのか不具合なのか区別がつきませんでした;