Xamarin.Formsで手軽に画面レイアウトを行う方法

Xamarin.Formsで手軽に画面レイアウトを行う方法をご紹介します。
Gridレイアウトを使用します。

条件

• Xamarin.Forms
• Visual Studio 2019
• SHARP SH-M12(Android 9.0 – API 28)

実装例

登録／編集画面のレイアウトには「Grid」を使用すると、入力欄やボタンの配置がいい感じに出来ます。

MainPage.xaml

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Layout.MainPage">

    <Grid HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="320" RowSpacing="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Grid.ColumnSpan="10" Text="情報を入力して下さい。" TextColor="Navy" FontSize="Medium" BackgroundColor="LightBlue" HorizontalTextAlignment="Center" />

        <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="タイトル：" />
        <Entry Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="7" Placeholder="タイトル（必須）" x:Name="titleText" />

        <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Text="メモ：" />
        <Editor Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="7" Placeholder="メモ（任意）" MaxLength="200" AutoSize="TextChanges" HeightRequest="90" x:Name="memoText" />

        <SearchBar Grid.Row="3" Grid.ColumnSpan="10" Placeholder="検索" />

        <Button Grid.Row="4" Grid.ColumnSpan="10" x:Name="addButton" Text="登録" Clicked="addButton_Clicked" />
    </Grid>

</ContentPage>

ポイント

• <Grid.ColumnDefinitions>で10列定義しています。
  • <ColumnDefinition Width=”0.1*” />とすることで、1列当たり全体の10％の幅となります。
• Grid.Column=””で、開始位置を指定します。
  • Grid.Column=”0″だと1列目からの開始で、Grid.Column=”3″だと4列目からの開始となります。
• Grid.ColumnSpan=””で指定することで、列を結合することが出来ます。
  • 上記の例では、検索バーとボタンをGrid.ColumnSpan=”10″として、10列分の幅で表示しています。

実行結果

以下のような表示になります。

注意事項

StackLayoutを用いれば、タグを入れ子にすることで、Gridレイアウトと同等の表示を行うことが出来ます。
しかし、パフォーマンスの観点で非推奨となっています。

StackLayout オブジェクトの組み合わせを使用してGridレイアウトを再現するために StackLayout を使用しないでください。
不要なレイアウト計算が行われるため、不経済です。

出展：StackLayout

参考

Microsoft：Xamarin.Forms のグリッド

https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/layouts/grid

stackoverflow：How to set XAML Width in percentage?

https://stackoverflow.com/questions/15784995/how-to-set-xaml-width-in-percentage/15785122

atmarkIT：Xamarin.Forms：テキスト入力のさまざまなオプションを設定するには？

https://www.atmarkit.co.jp/ait/articles/1612/07/news022.html

Microsoft：StackLayout

https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/layouts/choose-layout#stacklayout