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

確認飛行物体

5年前

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

1 条件
2 実装例
- 2.1 MainPage.xaml
- 2.2 ポイント
3 実行結果
4 注意事項
5 参考

条件

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

参考

条件

実装例

MainPage.xaml

ポイント

実行結果

注意事項

参考

Microsoft：Xamarin.Forms のグリッド

stackoverflow：How to set XAML Width in percentage?

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

Microsoft：StackLayout