Xamarin.Froms  StackLayout レイアウト(左 中央 右)

StackLayout レイアウト (左 中央 右 配置) についてメモしておきます。

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

using Xamarin.Forms;

namespace StackLayout05
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {

            BackgroundColor = Color.Silver;

            //iPhoneにおいて、ステータスバーとの重なりを防ぐためパディングを調整する
            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

            StackLayout stackLayout = new StackLayout
            {
                Spacing = 0,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Children =
                {
                new Label
                {
                     Text = "中央",
                     FontSize = 32,
                     BackgroundColor = Color.Blue,
                     // 横並び中央
                     HorizontalOptions = LayoutOptions.Center
                },
                new Label
                {
                     Text = "Start 左",
                     FontSize = 32,
                     BackgroundColor = Color.Blue,
                     // 横並び左
                     HorizontalOptions = LayoutOptions.Start
                },
                new Label
                {
                     Text = "中央",
                     FontSize = 32,
                     BackgroundColor = Color.Blue,
                     HorizontalOptions = LayoutOptions.Center
                },
                new Label
                {
                     Text = "End 右",
                     FontSize = 32,
                     BackgroundColor = Color.Blue,
                     HorizontalOptions = LayoutOptions.End
                },
                new Label
                {
                    Text = "↑↓上下均等中央",
                    FontSize = 32,
                    BackgroundColor = Color.Blue,
                    // 縦並び均等中央
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    // 横並び中央
                    HorizontalOptions = LayoutOptions.Center
                },

                // 横並び中央均等配置
                new StackLayout
                {
                    Spacing = 0,

                    Orientation = StackOrientation.Horizontal,
                    Children =
                {
                    new Label
                    {
                        Text = "左",
                        FontSize = 32,
                        BackgroundColor = Color.Blue,
                    },
                    new Label
                    {
                        Text = "中央均等",
                        FontSize = 32,
                        BackgroundColor = Color.Blue,
                        // 横並び中央均等配置
                        HorizontalOptions = LayoutOptions.CenterAndExpand
                    },
                    new Label
                    {
                        Text = "右",
                        FontSize = 32,
                        BackgroundColor = Color.Blue,
                    },
                }
                }
             }
            };
            // ラベルを配置
            Content = stackLayout;
        }
    }
}

 

目 次