レイアウトの設定方法１ | Xamarin.Forms - ITブログ時々なんでもブログ

レイアウトの設定方法１ | Xamarin.Forms

2017/01/14
18:24

今回はXamarin.Forms上でのコントロール等のレイアウトについて説明させて頂きます。
基本的にXamarin.Formsではレイアウトオプションを使用することにより、配置方法を設定していきます。従来のように CSS（スタイルシート）やコントロールに付属する設定等はありませんので、Web技術者やWindowsForm技術者のかたは少し覚えるのに苦労される方もいらっしゃるでしょう。

まず画面を作成する方法としてC#で記述する場合とXamlで記述する場合の２通りあります。どちらも使用用途によって使い分ける必要がありますので、両方覚えたほうが良いと思います。

前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin 4.2.0.719 (NuGet Xamarin.Forms 2.3.2.127)
・macOS Sierra 10.12.1 / Xcode8.1 / Xamarin.iOS 10.2.0.4

１．通常に表示

レイアウトを意識せずにラベルを並べただけだと正しく表示されません。全て同じ場所で表示されているため、最後のラベルのみが見えている状態です。

Xamlの場合

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="https://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppName.Views.TestPageXaml">
  <Label Text="テスト１" VerticalOptions="Center" HorizontalOptions="Center" />
  <Label Text="テスト２" VerticalOptions="Center" HorizontalOptions="Center" />
  <Label Text="テスト３" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

C#の場合

using Xamarin.Forms;
public class TestPageCs : ContentPage
{
    public TestPageCs()
    {
        Label label1 = new Label
        {
            Text = "テスト１"
        };
        Label label2 = new Label
        {
            Text = "テスト２"
        };
        Label label3 = new Label
        {
            Text = "テスト３"
        };
        Content = new StackLayout
        {
            Children = {
                    label1,
                    label2,
                    label3,
            }
        };
    }
}

２．縦に並べて表示

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"
             x:Class="AppName.Views.TestPageXaml">
  <StackLayout Orientation="Vertical"    <!--縦に表示-->
               VerticalOptions="Center" 
               HorizontalOptions="Center" >
    <Label Text="テスト１" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト２" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト３" VerticalOptions="Center" HorizontalOptions="Center" />
  </StackLayout>
</ContentPage>

Orientation="Vertical" がキーポイントです。

C#の場合

using Xamarin.Forms;
public class TestPageCs : ContentPage
{
    public TestPageCs()
    {
        Label label1 = new Label
        {
            Text = "テスト１",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label2 = new Label
        {
            Text = "テスト２",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label3 = new Label
        {
            Text = "テスト３",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Content = new StackLayout
        {
            Orientation = StackOrientation.Vertical,    //縦に表示
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
                    label1,
                    label2,
                    label3,
            }
        };
    }
}

Orientation = StackOrientation.Vertical, がキーポイントです。

３．横に並べて表示

２でVerticalで設定していたものをHorizontalに変更するだけです。

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"
             x:Class="AppName.Views.TestPageXaml">
  <StackLayout Orientation="Horizontal"    <!--横に表示-->
               VerticalOptions="Center" 
               HorizontalOptions="Center" >
    <Label Text="テスト１" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト２" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト３" VerticalOptions="Center" HorizontalOptions="Center" />
  </StackLayout>
</ContentPage>

C#の場合

using Xamarin.Forms;
public class TestPageCs : ContentPage
{
    public TestPageCs()
    {
        Label label1 = new Label
        {
            Text = "テスト１",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label2 = new Label
        {
            Text = "テスト２",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label3 = new Label
        {
            Text = "テスト３",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Content = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,    //横に表示
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
                    label1,
                    label2,
                    label3,
            }
        };
    }
}

次回は縦横双方向に対して並べて表示する方法についてご説明します。

最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニューは以下のURLからご覧になれます。
http://itblog.dynaspo.com/blog-entry-81.html

関連記事

Remoted iOS Simulator for Windows の動作要件が Visual Studio Enterprise に変更された件 | Xamarin.Forms
レイアウトの設定方法２ | Xamarin.Forms
レイアウトの設定方法１ | Xamarin.Forms
Xamlページを作成する方法 | Xamarin.Forms
Xamarin 日本語概要 -ザマリン- | Xamarin.Forms

レイアウトの設定方法２ | Xamarin.Forms ホーム Xamlページを作成する方法 | Xamarin.Forms

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

　入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

ITブログ時々なんでもブログ