記事一覧

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


前回に引き続き、レイアウトの設定方法についてご説明していきます。
前回は縦方向に揃えたレイアウトと、横方向に揃えたレイアウトをご説明いたしました。今回はその両方向に揃えるレイアウトをご説明いたします。


前提条件
・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.縦横方向に揃えたラベルの配置方法

(1)まずは横方向に3つのラベルを配置します。
横方向となるように Orientation を Horizontal に設定した StackLayout を3つ用意します。
(2)その Stacklayout の中にそれぞれ3つのラベルを配置します。
(3)Orientation を Horizontal に設定した StackLayout を1つ用意し、その中に(2)で作成した StackLayout を全て配置します。

以上で横方向に3つのラベル、縦方向に3つの StackLayout が配置でき、レイアウトの設定は完了です。


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="ExplorerDx.Views.TestPageXaml">
  <StackLayout Orientation="Vertical" <!--縦に表示-->
               VerticalOptions="Center"
               HorizontalOptions="Center" >
    <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>
    <StackLayout Orientation="Horizontal" <!--横に表示-->
                 VerticalOptions="Center"
                 HorizontalOptions="Center" >
      <Label Text="テスト4" VerticalOptions="Center" HorizontalOptions="Center" />
      <Label Text="テスト5" VerticalOptions="Center" HorizontalOptions="Center" />
      <Label Text="テスト6" VerticalOptions="Center" HorizontalOptions="Center" />
    </StackLayout>
    <StackLayout Orientation="Horizontal" <!--横に表示-->
                 VerticalOptions="Center"
                 HorizontalOptions="Center" >
      <Label Text="テスト7" VerticalOptions="Center" HorizontalOptions="Center" />
      <Label Text="テスト8" VerticalOptions="Center" HorizontalOptions="Center" />
      <Label Text="テスト9" VerticalOptions="Center" HorizontalOptions="Center" />
    </StackLayout>
  </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 label9 = new Label
        {
            Text = "テスト9",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        StackLayout content1 = new StackLayout
        {
            Orientation = StackOrientation.Horizontal, //横に表示
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
                        label1, label2, label3,
            }
        };
        StackLayout content2 = new StackLayout
        {
            Orientation = StackOrientation.Horizontal, //横に表示
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
                        label4, label5, label6,
            }
        };
        StackLayout content3 = new StackLayout
        {
            Orientation = StackOrientation.Horizontal, //横に表示
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
                        label7, label8, label9,
            }
        };
        Content = new StackLayout
        {
            Orientation = StackOrientation.Vertical, //縦に表示
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
                    content1,
                    content2,
                    content3,
            }
        };
    }
}





当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿
非公開コメント

アルバム

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

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