2016年

5月

26日

Xamarin.Froms  StackLayout レイアウト

StackLayout レイアウト についてメモしておきます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace StackLayout02
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();

            Padding = new Thickness(20);
            var red = new Label
            {
                Text = "Stop",
                BackgroundColor = Color.Red,
                FontSize = 20
            };
            var yellow = new Label
            {
                Text = "Slow down",
                BackgroundColor = Color.Yellow,
                FontSize = 20
            };
            var green = new Label
            {
                Text = "Go",
                BackgroundColor = Color.Green,
                FontSize = 20
            };

            /* 縦並び方向 頭 初期値
            Content = new StackLayout
            {
                Spacing = 10,
                Children = { red, yellow, green }
            };
            */

            
            // 縦並び方向 頭 LayoutOptions.Start
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦上 上:Start 中央:Center 下:End
                VerticalOptions = LayoutOptions.Start,

                // 横 左:Start 中央:Center 右:End
                HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Vertical,
                             
                Children = { red, yellow, green }
            };


            /*
            // 縦並び方向 下 LayoutOptions.End
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦上 上:Start 中央:Center 下:End
                VerticalOptions = LayoutOptions.End,

                // 横 左:Start 中央:Center 右:End
                //HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Vertical,
                           
                Children = { red, yellow, green }
            };
            */

            /*
            // 横並び方向 上 LayoutOptions.End
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦上 上:Start 中央:Center 下:End
                VerticalOptions = LayoutOptions.Start,

                // 横 左:Start 中央:Center 右:End
                //HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Horizontal,

                Children = { red, yellow, green }
            };
            */

            /*
            // 横並び方向 下 LayoutOptions.End
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦下
                VerticalOptions = LayoutOptions.End,

                // 横 左:Start 中央:Center 右:End
                //HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Horizontal,

                Children = { red, yellow, green }
            };
            */
        }
    }
}

 

LayoutOptions.Start
LayoutOptions.Center
LayoutOptions.End
LayoutOptions.Fill
LayoutOptions.StartAndExpand
LayoutOptions.CenterAndExpand
LayoutOptions.EndAndExpand
LayoutOptions.FillAndExpand

            // 縦並び方向 頭 初期値
            Content = new StackLayout
            {
                Spacing = 20,
                Children = { red, yellow, green }
            };

            // 縦並び方向 頭 LayoutOptions.Start
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦上 上:Start 中央:Center 下:End
                VerticalOptions = LayoutOptions.Start,

                // 横 左:Start 中央:Center 右:End
                //HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Vertical,
                             
                Children = { red, yellow, green }
            };

            // 縦並び方向 頭 LayoutOptions.Start
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦上 上:Start 中央:Center 下:End
                VerticalOptions = LayoutOptions.Start,

                // 横 左:Start 中央:Center 右:End
                HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Vertical,
                             
                Children = { red, yellow, green }
            };

            // 縦並び方向 下 LayoutOptions.End
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦上 上:Start 中央:Center 下:End
                VerticalOptions = LayoutOptions.End,

                // 横 左:Start 中央:Center 右:End
                //HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Vertical,
                           
                Children = { red, yellow, green }
            };

            // 横並び方向 上 LayoutOptions.End
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦上 上:Start 中央:Center 下:End
                VerticalOptions = LayoutOptions.Start,

                // 横 左:Start 中央:Center 右:End
                //HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Horizontal,

                Children = { red, yellow, green }
            };

            // 横並び方向 下 LayoutOptions.End
            Content = new StackLayout
            {
                // スペース
                Spacing = 20,

                // 縦下
                VerticalOptions = LayoutOptions.End,

                // 横 左:Start 中央:Center 右:End
                //HorizontalOptions = LayoutOptions.Start,

                // Vertical:縦並び Horizontal:横並び
                Orientation = StackOrientation.Horizontal,

                Children = { red, yellow, green }
            };

 

目 次