fc2ブログ

記事一覧

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


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

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



前提条件
・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


xamllayout_04.png



1.通常に表示

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

xamllayout_01.png


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="テスト1" VerticalOptions="Center" HorizontalOptions="Center" />
  <Label Text="テスト2" VerticalOptions="Center" HorizontalOptions="Center" />
  <Label Text="テスト3" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>


C#の場合
using Xamarin.Forms;
public class TestPageCs : ContentPage
{
    public TestPageCs()
    {
        Label label1 = new Label
        {
            Text = "テスト1"
        };
        Label label2 = new Label
        {
            Text = "テスト2"
        };
        Label label3 = new Label
        {
            Text = "テスト3"
        };
        Content = new StackLayout
        {
            Children = {
                    label1,
                    label2,
                    label3,
            }
        };
    }
}



2.縦に並べて表示


xamllayout_02.png

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="テスト1" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト2" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト3" VerticalOptions="Center" HorizontalOptions="Center" />
  </StackLayout>
</ContentPage>

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


C#の場合
using Xamarin.Forms;
public class TestPageCs : ContentPage
{
    public TestPageCs()
    {
        Label label1 = new Label
        {
            Text = "テスト1",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label2 = new Label
        {
            Text = "テスト2",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label3 = new Label
        {
            Text = "テスト3",
            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, がキーポイントです。



3.横に並べて表示

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

xamllayout_03.png

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="テスト1" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト2" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="テスト3" VerticalOptions="Center" HorizontalOptions="Center" />
  </StackLayout>
</ContentPage>


C#の場合
using Xamarin.Forms;
public class TestPageCs : ContentPage
{
    public TestPageCs()
    {
        Label label1 = new Label
        {
            Text = "テスト1",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label2 = new Label
        {
            Text = "テスト2",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        Label label3 = new Label
        {
            Text = "テスト3",
            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


関連記事

コメント

コメントの投稿

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

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

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。